Sticky navigation menus are useful when you have lots of content and pages. Many modern websites have already implement it differently.By having it, you can easily navigate to a different page of the website. There are two types of sticky navigation menus – always sticky and when you scroll you get it sticky. The key is to add position: fixed
and top: 0
in your header or navigation menu.
The menu you are about to implement will be when you scroll 300px down of your page.
HTML
<header id="masthead" class="site-header"> <div class="container"><nav id="site-navigation" class="main-navigation"> <div class="menu-navigation-menu-container"> <ul id="menu-navigation-menu" class="menu"> <li><a href="http://ageorgiev.com/">Home</a></li> <li><a href="http://ageorgiev.com/portfolio/">Portfolio</a></li> <li><a href="http://ageorgiev.com/gallery/">Gallery</a></li> <li><a href="http://ageorgiev.com/testimonial/">Testimonials</a></li> <li><a href="http://ageorgiev.com/blog/">Blog</a></li> <li><a href="http://ageorgiev.com/#about">About</a></li> <li><a href="http://ageorgiev.com/#contact">Contact</a></li> </ul> </div> </nav></div> </header>
CSS
If you want always sticky just add position: fixed
to .site-header
and completely remove .site-header.smaller
As you can see I have added a nice transition, because our navigation will be a bit smaller than the original one.
.site-header { width: 100%; height: 75px; background: rgba(255, 255, 255, .97); -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .05); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .05); box-shadow: 0 1px 0 rgba(0, 0, 0, .05); position: relative; z-index: 98; } .site-header.smaller { height: 55px; position: fixed; top: 0; -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); } .main-navigation { float: left; height: 75px; } .main-navigation ul { list-style: none; margin: 0; padding: 0; } .main-navigation ul li { display: inline-block; margin-right: 1.78571em; position: relative; vertical-align: middle; line-height: 75px; }
jQuery
With few lines of jQuery, we just say that when the user scrolls 300px our header (#masthead) will add a class smaller, when scroll back to top the class will be removed.
$(window).scroll(function() { if ($(window).scrollTop() > 300) { $('#masthead').addClass('smaller'); } else { $('#masthead').removeClass('smaller'); } });
Always Sticky Navigation
If you prefer to your navigation to be always sticky without the feature scroll, just add in the CSS position: fixed
to your header. Do not change the HTML and remove the jQuery.
What do you think is there a better or easier way to do it? Share in the comments below.
2 comments on “Sticky Navigation Menu”
Milen Petrinski - Gonzo
Just use position: sticky and forget about all the JS.
Alexander Georgiev
Nice suggestion Milen :)
However, what about if the user wants the sticky navigation to be applied of certain mouse scroll? The jQuery just adds an extra class on mouse scroll.