Need to center only top level navigation

Hello,

Our customer would like to see only the top (primary) level of his navigations text to be center aligned. I have tinkered with the CSS to death but just can’t get it to work. Once I center the primary navigational elements, it also centers the sub-navigation. Any help would be appreciated.

http://74.54.218.66/~zmc2/index.php

This should give you the general idea. http://www.visibilityinherit.com/code/center-nav.php

Eric links above should show you how its done and the simplest of those methods is to give the nav a width and use auto margins


.dj-mtmenu {
   margin: auto;
   width: 735px;


}



If you wanted the grey background to be 100% wide then you would need to place that image on the parent div instead.

Of course if the menu is dynamic or has different menus on other pages then you will need to use one of the other more complicated methods such as inline-block.

Apologies but I may have not explained myself correctly.

I would like the text, within each menu “button”, to be centered within their respective buttons.

I’ve tried text-align center, auto-margins with no luck.

Hope this makes sense :slight_smile:

You need to give 100% width to the spans inside.


.dj-mtmenu li a.dj-up_a span.dj-drop {
    background: url("../images/menu-arrow.gif") no-repeat scroll 100% 17px transparent;
    display: block;
    float: left;
    padding: 0 10px 0 0;
    text-align: center;
    width: 100%;
}

.dj-mtmenu li a.dj-up_a span {
    display: block;
    float: left;
    width: 100%;
}

You might want to give up on float: left if that’s the scenario. And remember that floating an element will make it a block level, so display:block and float:left are doing the same thing to that regard.

Thanks noonnope…

Only issue now is the arrow that I had as the background before is now gone. Not a huge deal but would like to keep it there if possible.

It’s the background property.

.dj-mtmenu li a.dj-up_a span.dj-drop {
    background: url("../images/menu-arrow.gif") no-repeat scroll 80% -60% transparent;
    display: block;
    float: left;
    padding: 0 10px 0 0;
    text-align: center;
    width: 100%;
}

You need to set something similar for the last one and to take care of the :hover, :active, :focus event.

Perfect!! Thanks so much

No problem :slight_smile: