I want to make a custom bootstrap menu on my SharePoint online site.

I imported the bootstrap javascript and css links on the master page. I imported the jquery library too.

Then with jquery I empty the navigation and populate the menu, and it works no so great. I cant navigate pass the second level menu.

I tried to include the css in the master page and it didnt work.

Here is the code I inserted in the seatle.html :

$("#DeltaTopNavigation").html(''bunch of code'');

The bunch of code is here :


The result on my site :

enter image description here

If I click or I hover the second level menu. Nothing happens.

So how can I make a custom bootstrap menu on sharepoint online, with a 3 level dropdown like the code I have ? Every other samples I tried doent work also when it is multilevel.

  • Use firebug or IE tools, your css are not being applied.
    – Aveenav
    Commented Mar 24, 2016 at 20:33

2 Answers 2


enter image description here

I threw in your code using Firebug and worked like charm (I already had bootstrap referenced in my master page) Try adding the CSS using Script Editor web part, then if it works, move it to your style sheet that's referenced from the master page. Firebug/IE tool is your friend.

  • I added the css as an external css page and it works.
    – metraon
    Commented Mar 29, 2016 at 23:38

I apologize, not enough street cred to comment. I usually work in On Prem environments, so not sure if this will help. However, there is a setting in the masterpage that limits your dynamic dropdowns. I've built a few navigation bars with jquery and had the same issue.

Anyway in SPD edit your master page search for MaximumDynamicDisplayLevels, most likely it is set to 1, change that to 3 or 4 and see if it fixes your issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.