1 reply [Last post]
yory
yory's picture
Offline
newbie
Last seen: 8 years 16 weeks ago
Timezone: GMT+2
Joined: 2013-02-21
Posts: 1
Points: 2

HI
I am trying to center the main navigation element on the pages of my premium theme header. Firebug says this is:
<nav role="navigation" class="site-navigation main-navigation">

I tried adding to the theme's custom CSS field:

.nav.site-navigation.main-navigation
{text-align: center;}

also tried:

{
    margin-left:auto;
    margin-right:auto;
    width: 480 px;
}

but nothing helped - the element is either left aligned or right aligned on the page

Any idea what am I doing wrong?

http://blueyecam.com/

Thanks

Zbee
Zbee's picture
Offline
Regular
Colorado Springs, CO, USA
Last seen: 8 years 13 weeks ago
Colorado Springs, CO, USA
Timezone: GMT-6
Joined: 2013-02-20
Posts: 11
Points: 11

It's center aligned on

It's center aligned on Firefox Aurora (20.0a2), and this is the only browser I have on my 2nd OS atm, so that's all the testing I can provide.

But I can imagine Smile So, I think your safest approach would be to make the navbar width: 100%; (assuming it's container has no padding) with text-align: center;.

--EDIT
Sorry, I guess I didn't even really pay attention to the post, this is a WP theme, or something of the like, isn't it?

Ok, you have:

.nav.site-navigation.main-navigation {text-align: center;}

For

<nav role="navigation" class="site-navigation main-navigation">

When it should be something like

nav.site-navigation, nav.main-navigation {text-align: center;}

Since it isn't

<div class="nav"><div class="site-navigation"><div class="main-navigation">

/* Zbee */

www.zbee.me