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>