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

Prevent the navigation bar from disappearing


tarekgemayel

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

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)

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

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

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

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

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

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