Jump to content

Brine/Keene sticky navigation

Recommended Posts

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 by AndrewTomas
Initial Revision
Link to comment
  • Replies 9
  • Views 2.2k
  • Created
  • Last Reply

Top Posters In This Topic

@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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

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
  • 3 months later...

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' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment
  • 1 year later...
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
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.