I know it’s a function of Bootstrap Navbar, but is there no easy way that you’ve found to correct all the problems with nested menus? I was set on getting my header menu nested, but quickly realized, like others on this forum, that there is no way to have more than one nested item. That is, I can have Item 1, Item 1>Item 2, even Item 1>Item 2, Item 3, but absolutely, under no circumstances may I have Item 1>Item 2>Item 3. I hope that all made sense, because it certainly has been frustrating to deal with. Anyway, as a workaround, I was going to add the Custom Menu widget to the Sidebar, but to my dismay, items still show up incorrectly. Now, at least with this method I can see all of my nested menu items, but unfortunately the CSS appears to be off for how they’re displayed. Items on the third level of nesting are underlined appropriately, but all levels above them are not. The items on the first or second level float their underline below the entire menu. I know this isn’t your coding, but I absolutely cannot seem to find where the problem is on my own or find a fix for it anywhere online. Could you please give me some guidance? After messing with Bootstrap for over an hour to figure out where they hid the code for the navbar brand font size, I could really, really use a break.
This might help you to solve problems with custom menu in sidebar. It will remove lines between, remove paddings, margins but leave them in levels to understand which item is related to which one.
Add this code to Theme Options - Other - CUstom CSS or inside Child Theme style.css if one is used.
.widget_nav_menu ul li {
border: none;
margin-bottom: 10px;
margin-top: 10px;
padding-bottom: 0;
}
.widget_nav_menu ul {
margin-bottom: 5px;
margin-top: 5px
}
.widget_nav_menu ul ul {
padding: 0 10px;
}