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>