In my quest to design a perfect three levels down responsive top navigation menu for SharePoint, I’ve stumbled on some annoyances that only people dealing with branding the SharePoint sites will understand me.

First, we need to give a bit of credit to MS for allowing us to use CSS instead of the old fashioned tables by setting the UseSimpleRendering property to “True”. An improvement, but far from a smooth sailing.

Second, why in the name of Merlin’s saggy left, MS decided to use the ClientIDMode property to generate and insert the pesky ID, zz2_RootAspMenu, zz13_RootAspMenu or any other random dynamic IDs for the unordered list?!? Inserting the above peskiness, wouldn’t be that bad if it was a static ID that you could make use in your CSS, but you might get different IDs when viewed logged in or anonymous.

So, why not use the class assigned to the UL (.root.ms-core-listMenu-root.static), one might say. That is because MS screwed the pooch again. They used the same class for the top navigation menu and the left navigation. Imagine that!

OK, you could use the CssClass property of the AspMenu to assign your own class but then you have to make use of the !important attribute way too often to override the MS default menu styles. Not healthy at all.

So, here is my solution. I used the jQuery to replace the annoying IDs assigned to the UL with my own. And now I have full control over the CSS.

// Replace that pesky automatic ul ID
$( "#zz13_RootAspMenu" ).attr( "id", "myTopNav" );
$( "#zz2_RootAspMenu" ).attr( "id", "myTopNav" );

To get the files used in this example, download the topMenu.zip package and extract the files. There are two files in the package: topMenu.master and topMenu.css

topMenu.master is just a slight modified version of the original oslo.master. I used it to load the necessary code. You can use your own master page if you have one.

If you’re not using the topMenu.master included in the package then add the following code to your own master page.

Add the following code right before the end of tag.

-- Start Responsive Top Navigation Meta and CSS file -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<SharePoint:CssRegistration name="/_catalogs/masterpage/topMenu/topMenu.css" After="corev15.css" runat="server" />
-- Start Responsive Top Navigation Meta and CSS file -->

Next look for “DeltaHorizontalQuickLaunch” and replace the whole navigation control with this:

-- Start Responsive Top Navigation -->
<nav id="menu-wrap">
<SharePoint:AjaxDelta id="DeltaHorizontalQuickLaunch" runat="server">
<Sharepoint:SPNavigationManager id="QuickLaunchNavigationManager" runat="server" QuickLaunchControlId="V4QuickLaunchMenu" ContainedControl="QuickLaunch" EnableViewState="false" >
        <SharePoint:DelegateControl runat="server" ControlId="QuickLaunchDataSource"><Template_Controls><asp:SiteMapDataSource SiteMapProvider="SPNavigationProvider" id="QuickLaunchSiteMap" ShowStartingNode="False" StartingNodeUrl="sid:1002" runat="server" />Template_Controls>SharePoint:DelegateControl>
        <SharePoint:AspMenu id="topNav" runat="server" EnableViewState="false" DataSourceId="QuickLaunchSiteMap" Orientation="Horizontal" StaticDisplayLevels="1" DynamicHorizontalOffset="0" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="3" SkipLinkText="" UseSimpleRendering="True" />
Sharepoint:SPNavigationManager>
SharePoint:AjaxDelta>
nav>
-- End Responsive Top Navigation -->

Next, right before the end of the tag insert this code:

-- Start Responsive Top Navigation Scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">script>
<script type="text/javascript">
 
        // Replace that pesky automatic ul ID
        $( "#zz13_RootAspMenu" ).attr( "id", "myTopNav" );
        $( "#zz2_RootAspMenu" ).attr( "id", "myTopNav" );
 
    $(function() {
                if ($.browser.msie && $.browser.version.substr(0,1)<7)
                {
                $('li').has('ul').mouseover(function(){
                        $(this).children('ul').css('visibility','visible');}).mouseout(function(){
                        $(this).children('ul').css('visibility','hidden');})
                }
 
                // Mobile
                $('#menu-wrap').prepend('
Menu
');            
                $("#menu-trigger").on("click", function(){$("#myTopNav").slideToggle();});
 
                // iPad
                var isiPad = navigator.userAgent.match(/iPad/i) != null;
                if (isiPad) $('#myTopNav ul').addClass('no-transition');      
    });          
script>
-- End Responsive Top Navigation Scripts -->

Keep in mind that you might get a different dynamic ID for the UL. Check your source code and modify the script accordingly.

If you decided to try the topMenu.master then go to Site Settings >> “Master pages and page layouts” and create a new folder called topMenu.
Upload both files (topMenu.master and topMenu.css) to the newly created folder and Publish them both.
Make sure you select “ASP NET Master Page” as the Content Type for the topMenu.master.

Once down uploading, go back to Site Settings >> under “Look and Feel” click on “Master page” and select topMenu/topMenu from the drop down list and hit OK.

This solution has been tested successfully on SharePoint 2013 sites, and the following browsers: IE10, IE11, Chrome, Firefox and Safari. I didn’t get the chance to try it on SharePoint 2010 or Office365 but I can’t see any reason why it wouldn’t work.

No doubt, there might be many other ways to achieve the same goal. I’ve tried many, most unsuccessful and few partial successful, but this solution worked the best for me and I hope it will work for you too. If I made your day and you would like to show your appreciation a beer would do me nicely. Good luck and stay tuned for more SharePoint branding goodies!