Menu Styles
Nav Position Change
Change nav position add class in .header-nav Nav left add class.justify-content-start , Nav right add class.justify-content-end Nav center add class.justify-content-center
<div class="header-nav w3menu navbar-collapse collapse justify-content-start" id="navbarNavDropdown"> <ul class="nav navbar-nav"> <li> <a href="javascript:void(0);"><span>Nav 1</span></a> </li> <li> <a href="javascript:void(0);"><span>Nav 2</span></a> </li> <li> <a href="javascript:void(0);"><span>Nav 3</span></a> </li> <li> <a href="javascript:void(0);"><span>Nav 4</span></a> </li> </ul> </div>
Nav Sub Menu Lavel
Change sub menu position add class in .sub-menu-down Nav left add class.menu-left , Nav right add class.menu-right Nav center add class.menu-center
<div class="header-nav w3menu navbar-collapse collapse justify-content-start" id="navbarNavDropdown"> <ul class="nav navbar-nav"> <li class="sub-menu-down active menu-right"> <a href="javascript:void(0);"><span>Nav 1</span></a> <ul class="sub-menu"> <li><a href="javascript:void(0);">Nav link 1</a></li> <li class="sub-menu-down active"><a href="javascript:void(0);">Nav link 2</a> <ul class="sub-menu"> <li><a href="javascript:void(0);">Nav link 1</a></li> <li class="sub-menu-down active"><a href="javascript:void(0);">Nav link 2</a> <ul class="sub-menu"> <li><a href="javascript:void(0);">Nav link 1</a></li> <li><a href="javascript:void(0);">Nav link 2</a></li> <li><a href="javascript:void(0);">Nav link 3</a></li> <li><a href="javascript:void(0);">Nav link 4</a></li> <li><a href="javascript:void(0);">Nav link 5</a></li> </ul> </li> <li><a href="javascript:void(0);">Nav link 3</a></li> <li><a href="javascript:void(0);">Nav link 4</a></li> <li><a href="javascript:void(0);">Nav link 5</a></li> </ul> </li> <li><a href="javascript:void(0);">Nav link 3</a></li> <li><a href="javascript:void(0);">Nav link 4</a></li> <li><a href="javascript:void(0);">Nav link 5</a></li> </ul> </li> <li> <a href="javascript:void(0);"><span>Nav 2</span></a> </li> <li> <a href="javascript:void(0);"><span>Nav 3</span></a> </li> <li> <a href="javascript:void(0);"><span>Nav 4</span></a> </li> </ul> </div>
Mega Menu Full And Wide
Change menu size add class in.has-mega-menu Menu wide width add class.wide-width , Menu full width add class.full-width
<div class="header-nav w3menu navbar-collapse collapse justify-content-start" id="navbarNavDropdown"> <ul class="nav navbar-nav"> <li class="has-mega-menu full-width active"> <a href="javascript:void(0);"><span>Nav 1</span></a> <div class="mega-menu"> <ul> <li> <a href="javascript:void(0);" class="menu-title">Heading 1 </a> <ul> <li><a href="javascript:void(0);">Nav link 1</a></li> <li><a href="javascript:void(0);">Nav link 2</a></li> <li><a href="javascript:void(0);">Nav link 3</a></li> <li><a href="javascript:void(0);">Nav link 4</a></li> <li><a href="javascript:void(0);">Nav link 5</a></li> </ul> </li> <li> <a href="javascript:void(0);" class="menu-title">Heading 2 </a> <ul> <li><a href="javascript:void(0);">Nav link 1</a></li> <li><a href="javascript:void(0);">Nav link 2</a></li> <li><a href="javascript:void(0);">Nav link 3</a></li> <li><a href="javascript:void(0);">Nav link 4</a></li> <li><a href="javascript:void(0);">Nav link 5</a></li> </ul> </li> <li> <a href="javascript:void(0);" class="menu-title">Heading 3 </a> <ul> <li><a href="javascript:void(0);">Nav link 1</a></li> <li><a href="javascript:void(0);">Nav link 2</a></li> <li><a href="javascript:void(0);">Nav link 3</a></li> <li><a href="javascript:void(0);">Nav link 4</a></li> <li><a href="javascript:void(0);">Nav link 5</a></li> </ul> </li> <li> <a href="javascript:void(0);" class="menu-title">Heading 5 </a> <ul> <li><a href="javascript:void(0);">Nav link 1</a></li> <li><a href="javascript:void(0);">Nav link 2</a></li> <li><a href="javascript:void(0);">Nav link 3</a></li> <li><a href="javascript:void(0);">Nav link 4</a></li> <li><a href="javascript:void(0);">Nav link 5</a></li> </ul> </li> <li> <a href="javascript:void(0);" class="menu-title">Heading 5 </a> <ul> <li><a href="javascript:void(0);">Nav link 1</a></li> <li><a href="javascript:void(0);">Nav link 2</a></li> <li><a href="javascript:void(0);">Nav link 3</a></li> <li><a href="javascript:void(0);">Nav link 4</a></li> <li><a href="javascript:void(0);">Nav link 5</a></li> </ul> </li> </ul> </div> </li> <li> <a href="javascript:void(0);"><span>Nav 2</span></a> </li> <li> <a href="javascript:void(0);"><span>Nav 3</span></a> </li> <li> <a href="javascript:void(0);"><span>Nav 4</span></a> </li> </ul> </div>
Mega Menu Auto Width
Change mega menu auto size add class in.has-mega-menu Mega menu auto width add class.auto-width
<div class="header-nav w3menu navbar-collapse collapse justify-content-start" id="navbarNavDropdown"> <ul class="nav navbar-nav"> <li class="has-mega-menu auto-width active"> <a href="javascript:void(0);"><span>Nav 1</span></a> <div class="mega-menu"> <ul> <li> <a href="javascript:void(0);" class="menu-title">Heading 1 </a> <ul> <li><a href="javascript:void(0);">Nav link 1</a></li> <li><a href="javascript:void(0);">Nav link 2</a></li> <li><a href="javascript:void(0);">Nav link 3</a></li> <li><a href="javascript:void(0);">Nav link 4</a></li> <li><a href="javascript:void(0);">Nav link 5</a></li> </ul> </li> <li> <a href="javascript:void(0);" class="menu-title">Heading 2 </a> <ul> <li><a href="javascript:void(0);">Nav link 1</a></li> <li><a href="javascript:void(0);">Nav link 2</a></li> <li><a href="javascript:void(0);">Nav link 3</a></li> <li><a href="javascript:void(0);">Nav link 4</a></li> <li><a href="javascript:void(0);">Nav link 5</a></li> </ul> </li> <li> <a href="javascript:void(0);" class="menu-title">Heading 3 </a> <ul> <li><a href="javascript:void(0);">Nav link 1</a></li> <li><a href="javascript:void(0);">Nav link 2</a></li> <li><a href="javascript:void(0);">Nav link 3</a></li> <li><a href="javascript:void(0);">Nav link 4</a></li> <li><a href="javascript:void(0);">Nav link 5</a></li> </ul> </li> <li> <a href="javascript:void(0);" class="menu-title">Heading 5 </a> <ul> <li><a href="javascript:void(0);">Nav link 1</a></li> <li><a href="javascript:void(0);">Nav link 2</a></li> <li><a href="javascript:void(0);">Nav link 3</a></li> <li><a href="javascript:void(0);">Nav link 4</a></li> <li><a href="javascript:void(0);">Nav link 5</a></li> </ul> </li> <li> <a href="javascript:void(0);" class="menu-title">Heading 5 </a> <ul> <li><a href="javascript:void(0);">Nav link 1</a></li> <li><a href="javascript:void(0);">Nav link 2</a></li> <li><a href="javascript:void(0);">Nav link 3</a></li> <li><a href="javascript:void(0);">Nav link 4</a></li> <li><a href="javascript:void(0);">Nav link 5</a></li> </ul> </li> </ul> </div> </li> <li> <a href="javascript:void(0);"><span>Nav 2</span></a> </li> <li> <a href="javascript:void(0);"><span>Nav 3</span></a> </li> <li> <a href="javascript:void(0);"><span>Nav 4</span></a> </li> </ul> </div>