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
Que594 Posted September 22, 2021 Author Share Posted September 22, 2021 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%; } 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.