earthwindflowermoon Posted October 2, 2022 Share Posted October 2, 2022 Site URL: https://dharmicliving.squarespace.com/ Hello! I am having issues with trying to create an offset floating navigation bar. I am using the below code which works perfectly on all pages except for the homepage, which is an index page. I want the offset margin to be present on all sides but currently the homepage is not viewing properly on the right hand side - see screenshot. Please help and thank you! pw : Dharma // Floating Header Bar // header { margin: 25px; } I am also using this code to create the background colour for the navigation... .Header { background-color: #f0efed !important; } Link to comment
Ziggy Posted October 3, 2022 Share Posted October 3, 2022 @earthwindflowermoon, you've added a margin, but the width of the header is still the same so it floated off the page, this Custom CSS should fix it by reducing the width of the header by double the margin: .Header--bottom.Header--overlay { width: calc(100vw - 50px); } Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
earthwindflowermoon Posted October 3, 2022 Author Share Posted October 3, 2022 Thanks for the reply but the result was not what I was hoping for. See screenshot attached.... Link to comment
tuanphan Posted October 6, 2022 Share Posted October 6, 2022 On 10/3/2022 at 3:54 PM, Ziggy said: @earthwindflowermoon, you've added a margin, but the width of the header is still the same so it floated off the page, this Custom CSS should fix it by reducing the width of the header by double the margin: .Header--bottom.Header--overlay { width: calc(100vw - 50px); } In Custom CSS, you will need to add some ~ " character to make calc work .Header--bottom.Header--overlay { width: calc(~"100% - 50px"); } and I think 100% will be better earthwindflowermoon 1 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
earthwindflowermoon Posted October 8, 2022 Author Share Posted October 8, 2022 Yes! Thank you!!! Worked perfectly 🙂 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