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

Fixed Navigation in Brine


govindaom

Question

15 answers to this question

Recommended Posts

  • 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
Link to comment
  • 1

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)

Link to comment
  • 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!!

Link to comment
  • 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

Link to comment
  • 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;
      } }


Link to comment
Guest
This topic is now closed to further replies.
×
×
  • Create New...