Open Navigation Menu By Default

[Bill Robbins]

I was recently asked if it’s possible to have the navigation menu open by default instead of requiring a click first to open it up. That can be done. Here’s how:

1. Go to the Theme Options page and select the Advanced tab.
2. Scroll down to the Custom CSS box and paste this:

   
   @media only screen and (min-width: 1024px) {
   
   	.slicknav_menu {
   		display: none;
   	}
   	
   	#sidebar {
   		z-index: 20;
   	}
   	
   	ul#primary-menu {
   		display: block;
   		list-style-type: none;
   		margin-left: 0;
   		margin-right: 0;
   		text-align: center;
   	}
   	
   	ul#primary-menu a {
   		display: block;
   		padding: 5px;
   	}
   	
   	ul#primary-menu li {
   		position: relative;
   	}
   	
   	ul#primary-menu li.current-menu-item a,
   	ul#primary-menu li.current-menu-item li a:hover,
   	ul#primary-menu li a:hover {
   		background-color: #ADB74B;
   	}
   	
   	ul#primary-menu li.current-menu-item li a {
   		background-color: transparent;
   	}
   	
   	ul#primary-menu li ul {
   		display: none;
   		list-style-type: none;
   	}
   	
   	ul#primary-menu li:hover ul {
   		display: block;
   		position: absolute;
   		left: 200px;
   		top: 0;
   		width: 180px;
   		background-color: rgba(0, 0, 0, 0.8);
   		box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
   	}
   
   }
   

3. Update your settings.

That should swap out the default navigation for a more traditional one on screens that are 1024 pixels wide and larger. Below that they’ll still use the click first one. You can change that threshold by changing the min-width: 1024px to the lowest browser size where you’d like to swap out the navigation.

You’ll need to replace the background color in this spot:

ul#primary-menu li.current-menu-item a,
	ul#primary-menu li.current-menu-item li a:hover,
	ul#primary-menu li a:hover {
		background-color: #ADB74B;
	}

with yours so it matches the rest of your site too.

I hope that helps out.

Thanks,
Bill

[Author]

Posts