Hi,

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

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.

ORIGINAL POST

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":

<script>
   //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) {
           aBar.parentNode.removeChild(aBar);
           header.insertBefore(aBar, header.firstChild);
       }

       //Call function on initial load.
       padBody();

       //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";
       resizeImages();
   }

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

</script>

Do let me know if this works for you.

-Brandon

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.

Ok, I updated the code. It works now. The only problem I see is that this doesn't show the announcement bar on mobile. In order to change that, the code would need to be refactored a bit which would take time. That combined with the fact that the OP never responded means I probably won't get to this.

Hi Brandon,

Thanks very much. That worked like a dream. If you ever get to refactoring the code for mobile, please post it up.

Does this code work with the template Bedford, as i put in the code, and nothing is happening

No, the element references are specific to Brine (and possibly Brine's related templates).

Hi @BrandonW, i would be happy to mark your answer as "Accepted" except that I do not see an option for doing so.

Yes, I saw that screenshot, searched high and low, but could not find any Accept link associated with your answer. If you do find it, let me know and I'd be happy to accept it.

@jaydev:

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

-Steve

Sorry @FMRF. I should have noticed that you're not the original poster! Of course, you can't accept it if you're not the original poster. Not sure how I missed that...I was going through older questions and must have gotten confused as to who asked what.

No problem @BrandonW. I did vote your answer up.

This is amazing. Thank you so much! I'm almost there but the fixed nav is covering up the banner and I can't figure out how to force it down. I presume it's because I have the announcement bar fixed as well - maybe something to be changed in the jQuery?

I'd love some help, @BrandonW ! Here's the site: https://team-compass-6ahm.squarespace.com/

Thank you!Fiona

This is amazing. Thank you so much! I'm almost there but the fixed nav is covering up the banner and I can't figure out how to force it down. I presume it's because I have the announcement bar fixed as well - maybe something to be changed in the jQuery?

I'd love some help, @BrandonW ! Here's the site: https://team-compass-6ahm.squarespace.com/

Thank you!Fiona

@starburst5654: It looks like you've got it sorted. Looking at your site, everything looks in order to me. If that's not the case, let me know.

@BrandonW -- I need this solution too, but it doesn't seem to work for me in Brine. Are there other settings in Style Editor that I need to tweak to get this to work?

@BrandonW -- I need this solution too, but it doesn't seem to work for me in Brine. Are there other settings in Style Editor that I need to tweak to get this to work?

Actually, I'm in Mercer -- maybe that's why?

Hi @BrandonW,

I was wondering if you could help regarding my mobile site. This code works fantastic for my desktop version, but when I go to the mobile site the annocument bar appears and disappears immediately.

Any ideas? Website is: www.departmentofartisans.com

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.

doesnt seem to work on Artesia template.. any ideas how to fix it for Artesia?

doesnt seem to work on Artesia template.. any ideas how to fix it for Artesia?

doesnt seem to work on Artesia template.. any ideas how to fix it for Artesia?

doesnt seem to work on Artesia template.. any ideas how to fix it for Artesia?

@BrandonW thank you for this! this works great - but like others, I'm having the issue where the announcement bar now disappears on mobile. Throwing my vote in for a fix there if you (or others) have time! Thanks again

@BrandonW thank you for this! this works great - but like others, I'm having the issue where the announcement bar now disappears on mobile. Throwing my vote in for a fix there if you (or others) have time! Thanks again