Que594 Posted September 22, 2021 Share Posted September 22, 2021 Site URL: https://delawarerising.club Hello! I've been spending many a' nights battling with Squarespace headers... Is it possible to have a header like the one below on my site through coding? What would the code look like to have the header (the circle bit) hanging over the next section? My site is version 7.0 - Pacific family (Event Horizon template) delawarerising.club Thanks for your help! I Link to comment
Que594 Posted September 22, 2021 Author Share Posted September 22, 2021 After some digging, I believe I need to push the crest as a site logo to the left. Then use negative margins for the navbar to be overlapped by the logo. Now let's see if I can code this... (Will post findings) Link to comment
Solution Que594 Posted September 22, 2021 Author Solution Share Posted September 22, 2021 (edited) Below is the code I used for this (kind of messy, not a pro coder. lol). It woooorks! //* determines height of site logo *// #header { margin: -120px auto; padding: 0px 0px; } //* pushing site logo to left of nav *// #header #logoWrapper, #header #siteTitleWrapper { position: relative; left: 15%; -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -o-transform: translate(-50%,0); transform: translate(-90%,80%); text-align: right !important; } #header #mainNavWrapper .index { margin: 0 0 0 12px !important; text-align: right !important; } //* removes center gap from logo *// #mainNavigation div.collection { margin: 0 !important; } #header #mainNavWrapper { text-align: right !important; } //* positioning of nav links *// #header #mainNavWrapper { text-align: right !important; right: 12%; } Edited September 22, 2021 by Que594 Link to comment
tuanphan Posted September 24, 2021 Share Posted September 24, 2021 Use negative position or margin or CSS pseudo class to achieve this. Do you still need help on this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment