@media navigation wrapping

[Mark Vogler]

Bill, I’d like to have the navigation move into the smartphone view sooner. The number of items I have in the nav area wrap into a second line in tablet view.

Can you provide me with the the css changes?

[Bill Robbins]

Good Afternoon Mark,

Excellent question there. You can change the breakpoint. Here’s how:

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

   
   @media only screen and (max-width: 1024px) {
   	
   	#mobile-menu ul,
   	#nav-left ul.menu {
   		display: none;
   	}
   	
   	#mobile-menu { 
   		display: block;
   	}
   	
   	select.tinynav {
   		border: none;
   		float: left;
   		border-radius: 0;
   		-webkit-appearance: none;
   		-webkit-background-clip: padding-box;
   		padding: 10px 20px;
   		margin-top: 0;
   		margin-bottom: 0;
   		margin-left: 0;
   	}
   
   }
   

3. Update your settings.

That will set the mobile menu to pick up when the browser window is 1024 pixels wide or smaller. You can change the 1024px in the snippet above to a different size if you’d like to.

If you have any trouble, let me know.

Thanks,
Bill

[Mark Vogler]

Thanks Bill

[Bill Robbins]

Anytime. Sorry for the delay…I’ve been on a kindergarten field trip today 🙂

[Mark Vogler]

You look older than that, hope you had fun!

[Bill Robbins]

Thanks. Hanging out with my last kindergartner at the zoo on a sunny spring day is pretty special.

[Author]

Posts