Proper Way To Center Navigation

[Porter]

I altered the sample theme navigation to be a fixed size of 1200px, rather than the full width spanning the entire page design it has by default. It's the right size, and centered on a desktop, but on mobile, the page scrolls to the left a ton, and the navigation text is centered according to that width.

My current code:

.nav-primary {
	background-color: #202020;
	width: 1200px;
	margin: 0px auto;
}

Those are the only changes I made, as it's fine on desktop. How do I go about properly changing the menu to the same width as the rest of the site (in my case 1200), and keep the navigation responsive?

---

Buy me a beer? | Try DigitalOcean VPS Hosting

http://anightinburlington.com/

[ᴅᴀᴠɪᴅ]

Delete the line

width: 1200px

replace withmax-width: 1200px;

Or.. if you need it to never go to the edges.. you would have to add the same css to .nav-primary which is already on .site-inner .wrap, so find..

.site-inner, .wrap {
    max-width: 960px;
}

in the media queries and replace with..

.site-inner, .wrap,
.nav-primary  {
    max-width: 960px;
}

and do the same anywhere else in the media queries that targets the wrap.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[ᴅᴀᴠɪᴅ]

First way is easier, if you're not sure. Just use your code, but replace that one line.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[Porter]

So if I understand, I'm just adding .nav-primary to the already existing .site-inner and wrap media queries? I went ahead and did that, and it appears to be working great on a Kindle Fire HD. I'll test it on the nook color and apply it to the other media queries to see the effects.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Author]

Posts