Navbar Code Snippets

Navbars seem to be the bain of my life!

I don't know why, but Navbars, Menus and Navigation code seems to take most of my time, every time I set up a new website. The Hover vs. Touch/Tap is not fully resolved in my opinion, and designing something that is responsive, intuitive and is optimised for how people use their devices always has me going round in circles in a never-ending design loop.

That siad, there are some always useful code snippets that make life easier/quicker. I've collected a few below.

Add class to Navbar on scroll

This is useful when you want to toggle between a "top of the page" style of navbar and a "scrolled down the page" style. A top level class on the Navbar will let you do stuff like "shrink" logos, hide superfluos content or "iconify" cContact information to save space an layouts. 

One of my favourites is on this website: lovedayandco.com

$(window).scroll(function() {              
    $(document).scrollTop() >  0 ? $('header').addClass('active') : $('header').removeClass('active');
});
10