govindaom 0 Share Posted December 13, 2015 (edited) Hi, Does anyone know the custom CSS code to make my navigation fixed in Brine? Thanks! Edited October 25, 2016 by chriscc retag Link to post
0 ARES1570048134 0 Share Posted December 22, 2015 I am looking for the same thing. Wanna make the navigation bar not scrolling up at all.Please help. Link to post
3 ARES1570048134 0 Solution Share Posted December 22, 2015 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 Link to post
0 Guest Share Posted January 14, 2016 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 post
0 sssupers 2,470 Share Posted February 7, 2016 Works nicely on desktop nav. Have you left mobile nav in free scrolling mode? "Yes the preview window expanding randomly is annoying isn't it? We were just having a laugh about how long it has been like that." Link to post
0 mvpottery 142 Share Posted March 19, 2016 @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 post
0 tarekgemayel 18 Share Posted May 9, 2016 Hello ARES, Amazing solution! Thanks. Any idea how to apply it now for Mobile? It works great on Tablet and PC. ThanksT. Link to post
0 bradyheyen1570047727 0 Share Posted July 13, 2016 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! Link to post
0 milc 0 Share Posted November 19, 2016 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 post
0 werickson 0 Share Posted February 7, 2018 .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 post
1 werickson 0 Share Posted February 7, 2018 (edited) .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 February 7, 2018 by wiriamu Initial Revision Link to post
0 JuanAguirre1570047917 0 Share Posted February 27, 2018 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? Link to post
0 ianmcarey 0 Share Posted August 31, 2018 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)? Link to post
1 brandon 8,986 Share Posted January 9, 2019 (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 January 10, 2019 by brandon If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to post
Question
govindaom 0
Hi,
Does anyone know the custom CSS code to make my navigation fixed in Brine?
Thanks!
Edited by chrisccretag
Link to post
Top Posters For This Question
3
2
1
Popular Days
Feb 7
2
Dec 22
2
Jan 14
2
Mar 19
1
Top Posters For This Question
ARES1570048134 3 posts
werickson 2 posts
ianmcarey 1 post
Popular Days
Feb 7 2018
2 posts
Dec 22 2015
2 posts
Jan 14 2016
2 posts
Mar 19 2016
1 post
Posted Images
15 answers to this question
Recommended Posts