Sticky navigation Brine 7.0

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!

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.

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

You're the best, i'll go try it!