Primary Navigation Centering – Minimum Theme

[mattOVM]

I am putting together this website and want to move the Primary Navigation in the Minimum Theme from Right to Center. I have a pretty good head start but I'm struggling to get it perfectly centered across the board on all the different devices.

I adjust this code:

/* Header
------------------------------------------------------------ */

}

#header .widget-area {
float: none;
margin: 0 auto;
width: 72%;
}

I had the width at 60% which works for everything but the iPad in landscape view. Bumping the width up to 72% did the trick for the iPad but now the Navigation is leaning to the Right on my desktop browsers. I feel like there must be another code to give it an absolute value across the board?

Any thoughts would be greatly appreciated.

Thanks!
Matt

http://theclassicitycollective.com/secret-sauce

[Doak Heggeness]

Add text-align:center; to the following:

.menu-primary,
.menu-secondary,
#header .menu {
	clear: both;
	color: #3e3e3e;
	font-size: 13px;
	margin: 0 auto;
	overflow: hidden;
	width: 100%;
        text-align:center;   
}

Changefloat: left; to float: none; & add display: inline-block;

.menu-primary li,
.menu-secondary li,
#header .menu li {
	display: inline-block;  
	float: none;   
	list-style-type: none;
}

---

Doak Heggeness, WordPress Development | Website

[mattOVM]

Thank you Doak, that's incredibly helpful!

For others looking on, after Doak's changes I had to go back to the #header .widget-area and readjust the width to compensate. I found 62% seems to work in my case.

#header .widget-area {
float: none;
margin: 0 auto;
width: 62%

Thank you!
Matt

[Author]

Posts