Jump to content

Fixed Navigation in Brine

Recommended Posts

  • 2 weeks later...
  • Replies 15
  • Views 16.9k
  • Created
  • Last Reply
  • 4 weeks later...

Hi there, I'm also using Brine and tried this CSS for a fixed nav, and it worked great! ... on the home page only. On the other pages the nav background and page links all turned white. So they are all there, but invisible for practical use. Any thoughts on why this might be?Thanks!!

Link to comment
  • 4 weeks later...
  • 1 month later...

@ARES - Thanks so much for the code above. It works for the most part, but the SECONDARY NAVIGATION now disappears. Oddly not on all pages, but on most. And the pages it does show up on, however, it is in the wrong place, appearing all the way at top of screen. Any suggestions for how to resolve this?

I can send links if needs be.

Thanks a lot

Link to comment
  • 1 month later...
  • 2 months later...
  • 4 months later...

any way to make this so that it get stuck to the very top of the page?

as another user mentioned, as @bradyhayen mentioned the sticky header has a gap above it where page content can be seen as one scrolls down

Link to comment
  • 2 months later...
  • 11 months later...

    .Header-inner { z-index: 9999; width: 100%; }
    .Header{ z-index: 9998; position: fixed; width: 100%; }

    @media screen and (max-width: 3000px) {
    .Index-page--has-image .Index-page-content {
        margin-top:104px !important;
      } }

    @media screen and (max-width: 500px) {
    .Index-page--has-image .Index-page-content {
        margin-top:0px !important;
      } }


Link to comment

.Header-inner { z-index: 9999; width: 100%; }
.Header{ z-index: 9998; position: fixed; width: 100%; }

@media screen and (max-width: 3000px) {
.Index-page--has-image .Index-page-content {
    margin-top:104px !important;
} }

@media screen and (max-width: 500px) {
.Index-page--has-image .Index-page-content {
    margin-top:0px !important;
} }


Link to comment
  • 3 weeks later...
  • 6 months later...
  • 4 months later...

This can be quite complicated when one considers all the combinations of desktop vs. mobile, announcement bar or not, closing of the announcement bar, changes to screen-width/orientation, and more.

This question has come up in this forum repeatedly and, in order solve all the various permutations, I created Fixit, a plugin for fixed headers and navigation in Brine (and the Brine/Wright family of templates).

You can see the full answer to the related question here. Hope it helps!

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • 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.