Responsive Top Navigation Menu

Author: Luis Kerr

Related Links

Related Articles

- Allegra – Premium SharePoint 2010 Theme
- ShareBoot – Responsive SharePoint 2013 Theme
- Avicia Theme for SharePoint 2013
- List All Checked Out Items Using PowerShell
- Change SharePoint 2013 Title
- Turn Off Mobile Browsing in SharePoint 2010/2013
- Responsive – Free SharePoint 2010 Theme

Popular SharePoint Books

14 Responses

  1. ijo says:


    There are some points, that You should consider:
    1. That annoying menu ID “zz13_RootAspMenu” actually consists of 3 parts: a) constant prefix (i.e. “zz”); b) master page/publishing page master publishing version number (i.e. “13”); c) constant prefix (i.e.” _RootAspMenu”). Every time You update Your master page to new major version, that ID “#zz13_RootAspMenu” gets new value (it is possible to use jQuery’s selector, that checks attribute’s ending – example: $(‘[id$=”_RootAspMenu “]’) ).
    2. You could user parent container’s ID/Class for CSS selector as from final outputted HTML (check rendered SharePoint page HTML source or use HTML inspector).

    So, in short, You should consider not using jQuery for that purpose, instead, use CSS as much as possible, as SharePoint by default is a little bit slow (especially 2013 version) and by default, there is no jQuery in SharePoint.

  2. Renato Lyke says:

    Hi Luis,

    I copied the code from topmenu.master and pasted it in oslo master. However i do not see a change in my top navigation menu.


    • Luis Kerr says:

      Renato, I’m pretty sure these were not the directions provided. Please pay attention to the steps above.

  3. svp says:

    Works great with the quick launch Navigation. Do we have to change the CSS too beside the navigation provider if it needs to work with Global Navigation?

  4. EduCa says:

    Luis maybe your example needs a little more details about the type of navigation you are using, what type of site you use, also from where you get menu links (ABOUT US, CONTACT US, etc.). I done exactly you explained using both files you provided in a publishing site and menu does not appear. Only I have a thin blue line without links. I’m using Global Navigation – Structural Navigation – Show pages. Can you help us?

  5. George Winters says:

    I really liked this – I installed it in Office 365 and it appears to work OK. – if slightly different from what you show.

  6. NGKprasad says:

    Thanks in advance, i found that
    if the user with read permission logs in site, css not loading for menu. It means not able to change the id of menu onload.
    what could be the fix for such case.

  7. Hafeez says:

    Same problem with me.
    Domain users with read permission logs in site, css not loading for menu. Only me as admin can see the nav bar.
    What could be the fix for such case?

  8. airliner says:

    Thank you for your post, but unfortunately I have some trouble with this solution. I downloaded the zipfile, uploaded both files, published the main version, changed the master page and told the path to the additional CSS file. So far so good. The master page changed and obviously the CSS was also loaded. But the page doesn’t look like your image “Responsive Top Navigation 31”. Instead it looks like “Responsive Top Navigation 2”. The menu isn’t top-down oriented but left-right with lue background and white font style.

    Did I miss something? I cleared the cache already and tried different Browsers (Firefox, Internet Explorer and Edge).

    • Luis Kerr says:

      airliner, most likely your CSS is overridden by other CSS.

      • airliner says:

        Luis, it seems that there are invalid values for some points. I get some warnings at background-image (where you use o-linear-gradient and -ms-linear-gradient), at -moz-border-radius and at zoom.


        • Nirienne says:

          Are all files checked in and published? Users have read permission on the Style Library?

  9. Florian says:

    Thanks for the article! I know it’s almost 2019, but I’m struggling with the responsive menu in SharePoint 2016 combined with the structural navigation.
    With bootstrap everything seems fine until you try to go down to the third level of the navigation. Therefore everything’s waiting for hover, it’s quite complicated to use on mobile devices which doesn’t have the ability to “hover” something. Either it’s clicked/tapped or not.
    Do you have any suggestions how to handle this?


Leave a Reply