how to center the primary navigation menu

[mdruce]

Hi,
My Site: http://redrockbrewing.com/.

I would like to make the primary menu centered. I have achieved this by setting

menu-primary{
margin-left: 170px;
}
It works and the menu becomes centered but with this setting on the iphone/ipad and other devices the site's primary menu aligns to the right as the responsive side is also having left margin of 170px.

I would like to know a way with which I can center the primary menu and it will be shown centred also on the mobile devices.

Any help would be highly appreciated.

Thanks
Mike

[mdruce]

Hi,
Apologies for the incomplete information. I am using legacy theme by studiopress.

Thanks
Michael.

[Sridhar Katakam]

Use this CSS instead:

#nav {
    display: table;
    margin: 0 auto;
}

#nav .wrap {
    width: auto;
}

---

Genesis Tutorials | Follow me on Twitter

[mdruce]

Hi Sridhar,
Thanks It worked. Can you check it once my welcome widget is not responsive. The reason behind.

Thanks
Mike

[Sridhar Katakam]

Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

.welcome-wrap {
    width: 100%;
    background: none;
    border-bottom: none;
}

.welcome-wrap .welcome-inner {
    background: #F2F2F2;
    border-bottom: 1px solid #CCCCCC;
}

---

Genesis Tutorials | Follow me on Twitter

[mdruce]

Hello Sridhar,
Thanks but the welcome widget is not getting smaller on the iphone and the size is fixed as usual. How can we edit the responsive CSS in the legacy theme.

Any help or idea would be appreciated.

Thanks
Mike

[Sridhar Katakam]

Looks fine to me in lower widths when I resize the browser.

---

Genesis Tutorials | Follow me on Twitter

[Author]

Posts