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

Prevent the navigation bar from disappearing

Question

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

Edited by tarekgemayel
Initial Revision

Share this post


Link to post

Recommended Posts

  • 8

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


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.

Edited by brandon
Updated solution - old solution out of date.

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

Share this post


Link to post
  • 0

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.


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 Brandon,

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

Share this post


Link to post
  • 0

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


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 @BrandonW, i would be happy to mark your answer as "Accepted" except that I do not see an option for doing so.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

@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


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.

Share this post


Link to post
  • 0

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.

Edited by brandon
Initial Revision

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

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


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

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

Share this post


Link to post
  • 0

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

Edited by jjjuliejj
Initial Revision

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

Hey @BrandonW , the code worked great on my Brine Family template. I am wondering if it's possible to have the logo subtly shrink as you scroll down the page. Thanks in advance for any suggestions you have!

Share this post


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

×
×
  • Create New...