Monday, February 24, 2014

Center Top Navigation for SharePoint 2013

I had a need to center the top navigation on a SharePoint 2013 site and it needed to adjust depending on screen resolution and browser size.  I could have hard coded the margins but I wanted something that scaled.

Researching this issue took some time to come to a conclusion that is deceptively simple.  Most everyone was suggesting JQuery but I felt there had to be a simple way and it turns out, there is.

First, on your custom master page, wrap the top navigation control in a <div> with an ID or class of your choosing.  See highlight in my code below:

  <div id="nav">
        <!--SPM:<SharePoint:AspMenu
            ID="TopNavigationMenu"
            Runat="server"
            EnableViewState="false"
            DataSourceID="topSiteMap"
            AccessKey="&lt;%$Resources:wss,navigation_accesskey%&gt;"
            UseSimpleRendering="true"
            UseSeparateCss="false"
            Orientation="Horizontal"
            StaticDisplayLevels="2"
            AdjustForShowStartingNode="true"
            MaximumDynamicDisplayLevels="2"
            SkipLinkText="" />-->
         </div>

Then in your custom CSS file, create a selector update that will auto adjust the left and right margin and use a percentage width for the navigation menu.  This will set the navigation window and allow it to float depending on the resolution and browser size.  You may need to update the width for your needs.

#nav {
 width:50%;
 margin-right:auto;
 margin-left:auto;
}

No JQuery or complex coding required.

No comments:

Post a Comment