Working on a customized menu design that you can view live at:
Focusing on the third level menu, I encountered an issue where all menus have the same width due to sharing the dropdown-menu class. While I understand the root cause of the problem, I am unsure how to resolve it without compromising Bootstrap functionality.
I'm unable to assign unique classes to each menu as Bootstrap relies on the dropdown-menu class. This inconsistency is evident when the menu changes appearance upon hover.
Here's a snippet of my code structure:
<nav class="navbar navbar-default lumenisInnerMenu" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse lumenisListItems">
<ul class="nav navbar-nav">
[*>NODE]
</ul>
</div>
</div>
</nav>
[>NODE]
<li class="[?SELECTED]dir current[/?][?NODE]dropdown-submenu HasChildren child[=DEPTH] dropdownmenu [/?]">
[?ENABLED]
<a [?!NODE] href="[=URL]" [/?] class="[?NODE]dropdown-toggle[/?]" data-toggle="dropdown">
<div class="textsubitem">
<span>[=TEXT]</span>
</div>
</a>
[?ELSE]
<a href="#" [?NODE] [/?]> [?NODE]
<span>[=TEXT]</span>[/?]
</a>
[/?]
[?NODE]
<ul class="dropdown-menu dropdown[=DEPTH]" id="[=ID]">
[*>NODE]
</ul>
[/?]
</li>
[/>]
Seeking assistance on resolving this issue while maintaining the core functionalities intact. Any help would be greatly appreciated. Thank you!
UPDATE: Resolved the issue by implementing the following solution:
If ($(window).width() > 960) {
var maxWidth = 0;
$('.dropdown0').each(function(){
var itemWidth = $(this).outerWidth(true);
maxWidth = Math.max(maxWidth, itemWidth) + "px";
$(".dropdown0 > li").css("max-width", maxWidth);
});
}
Identified and set the maximum width to effectively address the styling inconsistency in the menu items.