Brine/Keene sticky navigation

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;
   }

@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;
}

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

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

@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!

Thank you for providing these details.

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.

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

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;
}
}

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?