Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
govindaom

Fixed Navigation in Brine

Question

15 answers to this question

Recommended Posts

  • 3

govindaom,

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

.Header-inner { z-index: 4; width: 100%; }

.Header{ z-index: 5; position: fixed; width: 100%; }

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

Good Luck

Share this post


Link to post
  • 1

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


Edited by wiriamu
Initial Revision

Share this post


Link to post
  • 1
Posted (edited)

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!

Edited by brandon

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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


Share this post


Link to post
  • 0

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

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...