Center Logo and Menu on Smaller Devices

[aumc]

Hi, This is a test/dev site and our problem is when you reduce the screen size the menu pops under the logo but both are not centered plus there is a lot of blank space between the logo and menu. Is there a way to have the logo and menu become centered on smaller devices and also reduce the space under the logo? Also does the live theme have the option for a mobile type navigation dropdown menu like some of your other themes. Thanks.

[Bill Robbins]

Thank you for your business first of all. Looks with with the length of the logo and navigation menu, we need to go on and make the smaller than tablet style layout of the header work for slightly larger displays too. Here’s how to do that:

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

   
   @media only screen and (max-width: 1023px) {
   	
   	#header-content,
   	#footer {
   		width: 90%;
   	}
   	
   	.wrap {
   		width: 85%;
   		padding: 30px 5% 45px;
   	}
   	
   	#logo,
   	#text-logo {
   		float: none;
   		width: 100%;
   		text-align: center;
   	}
   	
   	#navigation {
   		float: none;
   		margin-top: 10px;
   		text-align: center;
   	}
   	
   	#navigation nav {
   		float: none;
   	}
   	
   	#navigation ul {
   		float: none;
   		width: 100%;
   		text-align: center;
   	}
   	
   	#header #navigation li {
   		float: none;
   		display: inline-block;
   	}
   	
   	#navigation ul li ul li {
   		float: left;
   		text-align: left;
   		display: block;
   	}
   	
   	#navigation ul li ul {
   		width: 170px;
   	}
   
   }
   

3. Update your settings.

If you run into any questions or trouble, let me know.

Thanks,
Bill

[aumc]

Great! Worked! Thanks for the quick response. I may change it so all size screens treat the logo and menu as it does now for the smaller screens (logo centered over centered nav. menu).

One other question was can this theme be made to have the mobile style menu for small devices or would I have to switch to one of the other themes that has it programmed in.

Thanks again.

[Bill Robbins]

Glad that worked for you.

There is a plugin called TinyNav that you can use to replace your navigation menu on smaller screens with one that uses a select drop-down menu. We use that same script in a few of our themes and it does seem to work well.

If you have any trouble using it on your site, just let me know.

Thanks,
Bill

[Author]

Posts