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
  • 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

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

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

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

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

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.