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

Prevent the navigation bar from disappearing




I am working on the "BRINE" template, which i like very much.The only downside is that the navigation bar disappears once you scroll down the page.

The "Pacific" template is exactly what i am looking for! It is precisely what i want to achieve with the navigation bar in "BRINE".

Please help friends!Tarek

Link to comment
  • Answers 29
  • Created
  • Last Reply

Recommended Posts

UPDATE DEC. 23, 2018:

Hi everyone. The original answer (included below) is old and out of date. Don't use it. It's easy to get a fixed header with CSS, but hard to ensure it looks right on all devices and contexts. If you need more than the basic CSS, use Fixit, a 'plugin' I created that is much more reliable and up-to-date.

A LOT of people have asked for help with this over the years. There are a lot of different things to consider when fixing nav/headers, and this answer didn't address every possible variation. So the answer needed continued modification.

So I finally spent a few weeks to create and test a 'plugin' that everyone can use to reliably get fixed headers/navigation in the Brine/Wright family of templates (see list at link).

It takes all the various aspects into account, and gives you options for "fixing" specific elements in the header. Once the code is added, it handles all the addition of CSS and Javascript for you.

Take a look at Fixit, and feel free to get in touch if you have any questions on it.


Hi there.

This has been asked before (as you have no doubt seen), but I don't think that answer takes everything into account that it ought to. Here's a better answer.

This is tricky because once you fix the header to the top, the main content gets covered by the header. This is due to the way that "position:fixed" removed the element from the calculated height of the parent. You can compensate by adding padding/margin to the body content, but then other problems can arise (or go unnoticed).

It's further complicated by the fact that you may or may not be using the announcement bar feature (now or in the future). On top of that, the announcement bar can be closed, which means we need to keep that in mind as well.

Finally, we must also take into account both full-width and mobile navigations AND the fact that the header isn't always the same height...as screen width or device orientation changes, navigation may wrap and the height change.

In order to take all of these factors into account, you're going to need to pair some simple CSS with some not-as-simple Javascript.

Insert the following CSS in the CSS Editor:

/*Set the full-width nav to fixed position.*/
.Header {
   position: fixed !important;
   width: 100%;
   z-index: 890; /*One more than SS galleries (889), at time of writing.*/

/*Set the mobile nav to fixed position. Note that clicking hamburger/navicon will jump user to top of page.*/
.Mobile {
   position: fixed !important;
   width: 100%;
   z-index: 890;

Now, insert the following Javascript in the Footer area of "Code Injection":

   //On Brine, move the announcement bar inside the .Header element, for use with fixed header. Adjust padding-top on main content according to height of header (initially, on window resize, and on announcement bar close).

   Y.on('domready', function () {
       var aBar = document.getElementsByClassName("sqs-announcement-bar-custom-location")[0];
       var aBarCloser = document.getElementsByClassName("sqs-announcement-bar-close")[0];
       var header = document.getElementsByClassName("Header")[0];
       var headerInner = document.getElementsByClassName("Header-inner")[0];
       var mobileHeader = document.getElementsByClassName("Mobile")[0];
       var siteInner = document.getElementsByClassName("Site-inner")[0];

       //Move annoucement bar into header. Otherwise applying "fixed" to both header and aBar will cause overlap.
       if (aBar) {
           header.insertBefore(aBar, header.firstChild);

       //Call function on initial load.

       //Call function if/when annoucement bar is closed.
       if (aBarCloser) {
           aBarCloser.addEventListener('click', function() {
               setTimeout(padBody, 500);
           }, false);

       //Call function if/when window is resized.
       window.addEventListener('resize', padBody, false);

   //A function to calculate header height, then pad main content accordingly.
   function padBody() {
       var headerHeight;
       headerHeight = header.offsetHeight;
       //On mobile, headerHeight will be 0, So recalculate from mobileHeader.
       if (!headerHeight) {
           headerHeight = mobileHeader.offsetHeight;
       siteInner.style.paddingTop = headerHeight + "px";

   //A function to resize images after padBody.
   function resizeImages() {
       var images = document.querySelectorAll('img[data-src]');
       for (var i = 0; i < images.length; i++) {


Do let me know if this works for you.


If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

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

Link to comment

Hi @levitatelondon. Take note that the code is out of date and I believe it's actually causing an error on your website (you can open the browser console using dev. tools [F12 or CTRL+SHIFT+I] to see it.

I appreciate the kind words though. Your words along with the fact that the old code is causing an error on your site finally motivated me to go back and address this properly, create a 'plugin', and update my answer.

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

Link to comment

Hi there ! I am having the same trouble ! I saw you came up with a great code and was wondering if you or anyone refractured or figured out how to in BRINE template: 1) Have a fixed announcement bar that does not disappear when you scroll down ?2) not cover up content on all pages ?3) and show announcement bar on mobile



Link to comment

Hello @BrandonW,

Thanks for the clue, I've fixed the problem of the navigation bar to get it stuck when scrolling down (Clay template). But I still have the covering problem, the nav bar is still covering the top images/texts/titles. Help please. Is there any possibility of fixing it?

Thanks for your assistance.

Link to comment


I too have Bedford. I adapted @BrandonW's code to work with Bedford. You may see it at this /test page. If it satisfies your needs, post an independant question specific to Bedford and mention me by my @_username reference. I'll answer with the adapted code. (Don't forget to give the url to your site in the question.)


I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

Hi @BrandonW,

This works great except when you have an announcement bar. If so, scrolling down causes the announcement bar to scroll up leaving a transparent section above the fixed nav bar itself.

Any images or text on your index page then appear in that section as you scroll down.

Do you have any way to fix that?

Thanks for your assistance.

Link to comment


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

This topic is now closed to further replies.

  • Create New...