bluefluidmotion Posted July 10, 2019 Share Posted July 10, 2019 (edited) I am trying to have the navigation sticky on all of my pages, but it seems to only work on one of the pages: link text This is the code that I am using. Thanks,Andrew T Header { position: fixed; top: 0; left: 0; right: 0; z-index: 999 } // fix mobile nav .Mobile-bar--top { position: fixed; top: 0; left: 0; right: 0; background: #85C1E9; } .Mobile-bar { position: fixed; z-index: 99999; } // move mobile overlay down .Mobile-overlay-menu-main { padding-top: 80px; } Edited July 10, 2019 by AndrewTomas Initial Revision Link to comment
tuanphan Posted July 10, 2019 Share Posted July 10, 2019 @AndrewTomas Edit Header { position: fixed !important; top: 25px !important; left: 0 !important; right: 0 !important; } and add /* Sticky Announcement Bar */ .sqs-announcement-bar-dropzone { position: fixed; top: 0; left: 0; right: 0; } 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
bluefluidmotion Posted July 10, 2019 Author Share Posted July 10, 2019 Having: Header { position: fixed !important; top: 25px !important; Works as long there is an announcement. But when there isn't, it leaves a gap at the top and doesn't move the top-nav to the top of the page. Changing it to Header { position: fixed !important; top: 0px !important;Fixes the issue, but covers the announcement. Also, the page scrolls over the announcement. How do you make it go behind the announcement?link textThanks Link to comment
bluefluidmotion Posted July 10, 2019 Author Share Posted July 10, 2019 Having: Header { position: fixed !important; top: 25px !important; Works as long there is an announcement. But when there isn't, it leaves a gap at the top and doesn't move the top-nav to the top of the page. Changing it to Header { position: fixed !important; top: 0px !important;Fixes the issue, but covers the announcement. Also, the page scrolls over the announcement. How do you make it go behind the announcement?link textThanks Link to comment
tuanphan Posted July 10, 2019 Share Posted July 10, 2019 @AndrewTomas Use z-index:999; for sqs-announcement-bar-dropzone.Also, I think maybe Squarespace has a problem, if you don't tag me, there will be no email notifications. Weird! 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
jonas4562019 Posted July 11, 2019 Share Posted July 11, 2019 Thank you for providing these details. I am a Web developer(Wordpress Expert) experienced in PHP & MySQL web programming, clean W3 compliant XHTML/HTML/CSS coding and Javascript/Jquery/AJAX programming.[link text][1] [1]: http://au-customer-service.com Link to comment
brandon Posted October 24, 2019 Share Posted October 24, 2019 Hi there. I was going to chime in here and mention the plugin I created that solves issues like this with fixed headers in Brine templates. But, I see the site happens to be using it already! It's always fun to see it in the wild. I'll just also add that I appreciate your eye for detail @bluefluidmotion. Not everyone notices those small issues with the announcement bar, overlapping text, etc. and perseveres until they find a solution. If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
SouthernSunEvents Posted August 3, 2021 Share Posted August 3, 2021 On 7/10/2019 at 7:50 PM, tuanphan said: @AndrewTomas Use z-index:999; for sqs-announcement-bar-dropzone.Also, I think maybe Squarespace has a problem, if you don't tag me, there will be no email notifications. Weird! @tuanphan I've been struggling for months on this one. I know there are a lot of site factors to consider but might you have any ideas on how to disable the scrolling on my mobile/tablet nav? I have too many images/then white blocks and the overlap is driving me mental. http://www.southernsunevents.com PW: sse2020 Link to comment
tuanphan Posted August 4, 2021 Share Posted August 4, 2021 On 8/3/2021 at 8:01 AM, SouthernSunEvents said: @tuanphan I've been struggling for months on this one. I know there are a lot of site factors to consider but might you have any ideas on how to disable the scrolling on my mobile/tablet nav? I have too many images/then white blocks and the overlap is driving me mental. http://www.southernsunevents.com PW: sse2020 Add to Custom CSS /* Disable sticky header on mobile tablet */ @media screen and (max-width:900px) { .Mobile-bar.Mobile-bar--top { position: relative !important; } } 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
SouthernSunEvents Posted August 4, 2021 Share Posted August 4, 2021 3 hours ago, tuanphan said: Add to Custom CSS /* Disable sticky header on mobile tablet */ @media screen and (max-width:900px) { .Mobile-bar.Mobile-bar--top { position: relative !important; } } Hey @tuanphan, This works but then makes my menu nav disappear and creates spacing at the top of each page? 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