Fixed Navigation in Brine

Hi,

Does anyone know the custom CSS code to make my navigation fixed in Brine?

Thanks!

I am looking for the same thing. Wanna make the navigation bar not scrolling up at all.Please help.

govindaom,

I just added this code into Custom CSS section for my site (Brine Template) and it works.

Try it out and let me know if there is any bugs or misbehaving.

Good Luck

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

site link and show me your code.

Works nicely on desktop nav. Have you left mobile nav in free scrolling mode?

@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

Hello ARES,

Amazing solution! Thanks.

Any idea how to apply it now for Mobile? It works great on Tablet and PC.

ThanksT.

The "stickiness" works really well! But it just threw the rest of the page up underneath the header (the top row of journals shouldn't be cut in half). Any idea on how to fix this? Thanks!

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

it worked for sonora too, thanks!

    .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;
      } }

.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;
} }

This code worked on my site, but is there a way to hide the secondary nav and have it appear after scrolling past a point?

This works great on my index page, but I'm having the same issue on the store page where the sticky nav covers part of the top row of items--is there something I can add to the code to disable the sticky nav on the store page (while keeping it for the other pages)?

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!