Keep the Nav Bar on Top at All Times

[Daniel Bogard]

Hi! I would like to be able to keep the nav bar on top at all times (like in the United theme).

Thanks for your help!

[Bill Robbins]

Hello Daniel,

Fantastic question. You can do that. Here’s how:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #navigation {
   	position: fixed;
   	top: 0;
   	left: 0;
   	right: 0;
   }
   
   nav#primary-site-navigation {
   	margin: 0 auto;
   	width: 1140px;
   }
   
   #menu-social-media {
   	position: absolute;
   	right: 12%;
   }
   
   #wrap {
   	position: relative;
   	top: 40px;
   }
   
   .logged-in #navigation {
   	top: 32px;
   }
   
   @media only screen and (min-width: 1024px) and (max-width: 1180px) {
   
   	nav#primary-site-navigation {
   		width: 960px;
   	}
   
   }
   
   @media only screen and (min-width: 768px) and (max-width: 1023px) {
   
   	nav#primary-site-navigation {
   		width: 750px;
   	}
   
   }
   
   @media only screen and (max-width: 767px) {
   	
   	.logged-in #navigation {
   		top: 46px;
   	}
   	
   	.logged-in #wrap {
   		top: 83px;
   	}
   	
   	nav#primary-site-navigation {
   		width: 90%;
   	}
   	
   	#menu-social-media {
   		position: relative;
   		right: auto;
   	}
   
   }
   
   @media only screen and (max-width: 520px) {
   
   	nav#primary-site-navigation {
   		width: 100%;
   	}
   	
   }
   

3. Update your settings.

That should fix the navigation menu to the top of the screen. If you have any questions, just let me know.

Thanks,
Bill

[Daniel Bogard]

Thanks Bill!

So this may be getting too fancy… But any way to keep the nav bar under the logo / header image, but then move to the top as I scroll down the page (i.e. have the logo/header go away when you scroll down, and only then have the nav bar stick to the top)?

Thanks!

[Bill Robbins]

Also a good question. I suspect we can do that. Realistically that would work best inside a child theme because it’ll take a few changes to the underlying code and adding in some javascript to make it work.

If it’s something you want to try, let me know and I can create it for you. Most likely I would have time to do that in the morning.

Thanks,
Bill

[Author]

Posts