Centering CSS top navigation menu - SharePoint subsites

Question

I've searched high and low for the answer to the question but nothing seems to be working so hoping someone here can help me out.

I am trying to center my top navigation menu for my SharePoint site but not having any luck. I have tried specifying a width, margin:0 auto and text-align=center with various other suggestions under the NavMainBar class. No matter what I am trying, the sub sites (text) always align left. I am sure its something minor, but for the life of me I am missing something.

A snippet of the CSS is attached. Was hoping someone could tell me where I am going wrong.

Edit: Added a screen dump to make myself a little clearer with what I am having trouble with. I need to move the text within the subsites on the menu, i.e Forms, Infopath, Test 1 etc etc to the middle of the page. Basically, centering just the heading text in the topnav menu, not the items on the drop down

http://i.imgur.com/mYcgR9g.png

Cheers

/* Top Menu */
.NavMainBar {position:relative; width:100%; text-align:center; height:40px; padding-bottom:1px; border:0px solid #000;}
.NavBarIn {float:left; padding-left:10px; height:40px; }
.NavBarLeft {float:left; height:40px; width:9px; background-color:#EBEBEB; /*background-image:url('../../../Images/navBarLeft.png');*/ background-repeat:no-repeat;}
.NavBarRight {float:left; height:40px; width:9px; background-color:#EBEBEB; /*background-image:url('../../../Images/navBarRight.png'); */ background-repeat:no-repeat;}
.NavBarFill {float:left; width:98%; height:40px; background-color:#EBEBEB; /*background-image:url('../../../Images/navBarFill.png'); */ background-repeat:repeat-x;}

Edit: Added HTML - The references to the other classes are to the stock standard core4v.css

<div id="zz16_TopNavigationMenuV4" class="s4-tn">
<div class="menu horizontal menu-horizontal">
    <ul class="root static">
        <li class="static"><a class="static menu-item" href="/forms/SitePages/Home.aspx" accesskey="1"><span class="additional-background"><span class="menu-item-text">Forms</span></span></a></li><li class="static dynamic-children"><a class="static dynamic-children menu-item" href="/infopath/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Infopath</span></span></a><ul class="dynamic">
            <li class="dynamic dynamic-children"><a class="dynamic dynamic-children menu-item" href="/infopath/_layouts/viewlsts.aspx?BaseType=0"><span class="additional-background"><span class="menu-item-text">Lists</span></span></a><ul class="dynamic">
                <li class="dynamic"><a class="dynamic menu-item" href="/infopath/Lists/TimeInLieu/AllItems.aspx"><span class="additional-background"><span class="menu-item-text">TimeInLieuMaster</span></span></a></li><li class="dynamic"><a class="dynamic menu-item" href="/infopath/Lists/TimeInLieuDaysOff/AllItems.aspx"><span class="additional-background"><span class="menu-item-text">TimeInLieuDaysOff</span></span></a></li>
            </ul></li><li class="dynamic dynamic-children"><a class="dynamic dynamic-children menu-item" href="/infopath/_layouts/viewlsts.aspx?BaseType=1"><span class="additional-background"><span class="menu-item-text">Libraries</span></span></a><ul class="dynamic">
                <li class="dynamic"><a class="dynamic menu-item" href="/infopath/TravelRequest/Forms/AllItems.aspx"><span class="additional-background"><span class="menu-item-text">TravelRequest</span></span></a></li><li class="dynamic"><a class="dynamic menu-item" href="/infopath/ISAuthorisation/Forms/AllItems.aspx"><span class="additional-background"><span class="menu-item-text">ISAuthorisation</span></span></a></li>
            </ul></li>
        </ul></li><li class="static"><a class="static menu-item" href="/TEST1/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Test 1</span></span></a></li><li class="static"><a class="static menu-item" href="/test2/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Test 2</span></span></a></li><li class="static"><a class="static menu-item" href="/test3/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Test 3</span></span></a></li><li class="static"><a class="static menu-item" href="/test4/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Test 4</span></span></a></li>
    </ul>
</div>

Hi Smith, not sure which HTML you are referring to here. This is a SP Site so its referencing the PlaceHolderHorizontalNav content place holder. I am not using the conventional <li> method etc. Each of the main sites sub sites are displayed in this menu. — Sanchez
Without the full HTML code of the page we cannot help at all.... You may want to use Firebug (addin of Firefox) to play with the CSS code in live, or with the Development Toolbar of Chrome. It's very handy to do live changes. Be aware about the fact that the SP masterpages don't usually havea DOCTYPE, so the HTML code of the page will render in Quirk Mode by IE. It means the page will render not as excepted but as a mix between different versions of IE (see quirksmode.org/css/quirksmode.html for more explanations) — AymKdn
ok i have added the html code from the topnav menu as requested. Cheers — Sanchez

Dubstaphone Dubstaphone · Accepted Answer · 2013-06-08T21:26:39

Put all of the buttons inside it's own <div>

On the master div (not the one with the buttons), set align="center"

Then, remove float:left

Centering CSS top navigation menu - SharePoint subsites

2 Answers