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 to=""><span>Nav 1</span></a> </li> <li> <a to=""><span>Nav 2</span></a> </li> <li> <a to=""><span>Nav 3</span></a> </li> <li> <a to=""><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="navbarNavDropdown6"> <ul class="nav navbar-nav"> <li class="sub-menu-down active menu-right"> <a to=""><span>Nav 1</span></a> <ul class="sub-menu"> <li><a to="">Nav link 1</a></li> <li class="sub-menu-down active"><a to="">Nav link 2</a> <ul class="sub-menu"> <li><a to="">Nav link 1</a></li> <li class="sub-menu-down active"><a to="">Nav link 2</a> <ul class="sub-menu"> <li><a to="">Nav link 1</a></li> <li><a to="">Nav link 2</a></li> <li><a to="">Nav link 3</a></li> <li><a to="">Nav link 4</a></li> <li><a to="">Nav link 5</a></li> </ul> </li> <li><a to="">Nav link 3</a></li> <li><a to="">Nav link 4</a></li> <li><a to="">Nav link 5</a></li> </ul> </li> <li><a to="">Nav link 3</a></li> <li><a to="">Nav link 4</a></li> <li><a to="">Nav link 5</a></li> </ul> </li> <li> <a to=""><span>Nav 2</span></a> </li> <li> <a to=""><span>Nav 3</span></a> </li> <li> <a to=""><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="navbarNavDropdown8"> <ul class="nav navbar-nav"> <li class="has-mega-menu full-width active"> <a to=""><span>Nav 1</span></a> <div class="mega-menu"> <ul> <li> <a to="" class="menu-title">Heading 1 </a> <ul> <li><a to="">Nav link 1</a></li> <li><a to="">Nav link 2</a></li> <li><a to="">Nav link 3</a></li> <li><a to="">Nav link 4</a></li> <li><a to="">Nav link 5</a></li> </ul> </li> <li> <a to="" class="menu-title">Heading 2 </a> <ul> <li><a to="">Nav link 1</a></li> <li><a to="">Nav link 2</a></li> <li><a to="">Nav link 3</a></li> <li><a to="">Nav link 4</a></li> <li><a to="">Nav link 5</a></li> </ul> </li> <li> <a to="" class="menu-title">Heading 3 </a> <ul> <li><a to="">Nav link 1</a></li> <li><a to="">Nav link 2</a></li> <li><a to="">Nav link 3</a></li> <li><a to="">Nav link 4</a></li> <li><a to="">Nav link 5</a></li> </ul> </li> <li> <a to="" class="menu-title">Heading 5 </a> <ul> <li><a to="">Nav link 1</a></li> <li><a to="">Nav link 2</a></li> <li><a to="">Nav link 3</a></li> <li><a to="">Nav link 4</a></li> <li><a to="">Nav link 5</a></li> </ul> </li> <li> <a to="" class="menu-title">Heading 5 </a> <ul> <li><a to="">Nav link 1</a></li> <li><a to="">Nav link 2</a></li> <li><a to="">Nav link 3</a></li> <li><a to="">Nav link 4</a></li> <li><a to="">Nav link 5</a></li> </ul> </li> </ul> </div> </li> <li> <a to=""><span>Nav 2</span></a> </li> <li> <a to=""><span>Nav 3</span></a> </li> <li> <a to=""><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="navbarNavDropdown11"> <ul class="nav navbar-nav"> <li class="has-mega-menu auto-width active"> <a to=""><span>Nav 1</span></a> <div class="mega-menu"> <ul> <li> <a to="" class="menu-title">Heading 1 </a> <ul> <li><a to="">Nav link 1</a></li> <li><a to="">Nav link 2</a></li> <li><a to="">Nav link 3</a></li> <li><a to="">Nav link 4</a></li> <li><a to="">Nav link 5</a></li> </ul> </li> <li> <a to="" class="menu-title">Heading 2 </a> <ul> <li><a to="">Nav link 1</a></li> <li><a to="">Nav link 2</a></li> <li><a to="">Nav link 3</a></li> <li><a to="">Nav link 4</a></li> <li><a to="">Nav link 5</a></li> </ul> </li> <li> <a to="" class="menu-title">Heading 3 </a> <ul> <li><a to="">Nav link 1</a></li> <li><a to="">Nav link 2</a></li> <li><a to="">Nav link 3</a></li> <li><a to="">Nav link 4</a></li> <li><a to="">Nav link 5</a></li> </ul> </li> <li> <a to="" class="menu-title">Heading 5 </a> <ul> <li><a to="">Nav link 1</a></li> <li><a to="">Nav link 2</a></li> <li><a to="">Nav link 3</a></li> <li><a to="">Nav link 4</a></li> <li><a to="">Nav link 5</a></li> </ul> </li> <li> <a to="" class="menu-title">Heading 5 </a> <ul> <li><a to="">Nav link 1</a></li> <li><a to="">Nav link 2</a></li> <li><a to="">Nav link 3</a></li> <li><a to="">Nav link 4</a></li> <li><a to="">Nav link 5</a></li> </ul> </li> </ul> </div> </li> <li> <a to=""><span>Nav 2</span></a> </li> <li> <a to=""><span>Nav 3</span></a> </li> <li> <a to=""><span>Nav 4</span></a> </li> </ul> </div>