Bootstrap menu SharePoint Online

Question

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").empty();
$("#DeltaTopNavigation").html(''bunch of code'');
$('.dropdown-toggle').dropdown();

The bunch of code is here :

http://codepen.io/anon/pen/BjQqPO

The result on my site :

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.

Answer 1

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.

Answer 2

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.