Jump to content

Sticky navigation Brine 7.0

Recommended Posts

Site URL: https://skylabnyc.com/reshades

Hello. I'm using this code to make a sticky navigation on a Brine 7.0 template:

/* Fixed Header */
.Header {
  position: fixed;
  z-index: 9999;
  width: 100%;
  top: 0px;
}
.Content-outer {
  margin-top: 80px;
}

This code works, but when I go and add an announcement bar the sticky nav covers it up.

I played with the top 0px but that just leaves a gap when I scroll. Is there a way to include the announcement bar with the sticky nav code, so it all travels together when a user scrolls?

Thank you!

Link to comment

You can try this technique:

https://inscapewebdesign.com/free-squarespace-hacks/2019/6/11/sticky-fixed-header-for-brine-templates

There are many threads in the forum providing slightly different ways of doing this as well as lots of blogs, hopefully one of those will fit your needs if this doesn't.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
On 10/11/2022 at 10:28 AM, Skylab said:

Site URL: https://skylabnyc.com/reshades

Hello. I'm using this code to make a sticky navigation on a Brine 7.0 template:

/* Fixed Header */
.Header {
  position: fixed;
  z-index: 9999;
  width: 100%;
  top: 0px;
}
.Content-outer {
  margin-top: 80px;
}

This code works, but when I go and add an announcement bar the sticky nav covers it up.

I played with the top 0px but that just leaves a gap when I scroll. Is there a way to include the announcement bar with the sticky nav code, so it all travels together when a user scrolls?

Thank you!

Change position: fixed; to position: sticky;

(and keep top: 0px;)

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
  • 2 weeks later...

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.