Bootstrap Navigation for SharePoint 2013 and beyond RRS feed

  • Question

  • I created a new Master page which needed to be responsive. I picked up the SharePoint snippet for the Top Navigation from the Snippet Gallery. I turned the Simple layout as False to get the un-ordered list format of the Top Navigation because a Table layout of the Navigation is not responsive. I applied the CSS to brand the Navigation and get a responsive layout for mobile use as well. That is all fine and dandy, but when the Navigation item at the far right of the page has a dropdown menu, the dropdown menu seem to seep into the right of the page and the page now has a horizontal scroll. With the out of the box navigation, the ASP.NET Menu seem to automatically render the dropdown menu to the left if there is no screen space. How do I achieve this with a responsive layout of the Top Navigation without writing a function to manage that. I see the same problem with Out of the box bootstrap navbar. Doesn't the Bootstrap Navbar have any property to manage this? It would be quite surprising but I searched and couldn't find anything other that scripts to manage the side of the menus. Or what is the best way to customize Top nav with responsive design of a new master page

    Thanks for you taking time and helping me out. Appreciate

    • Edited by jaunC Sunday, May 12, 2019 7:33 PM
    Sunday, May 12, 2019 7:27 PM


  • Hi,

    If you use Bootstrap navigation bar, please add the CSS style below into master page.

    .dropdown-menu > li > a{
    	white-space:normal !important;

    Best Regards,


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, May 13, 2019 9:29 AM