Element Fitguide

Default Navbar <> show code

			
				<nav class="navbar navbar-expand-md main-nav bg-primary">
					<div class="container">
						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
							<span class="burger-menu icon-toggle "><i class=" fa fa-bars icon-menu icons"></i></span>
						</button>
						<a class="navbar-brand" href="index.html">
							<img src="img/logo.png" alt="logo">
						</a>

						<div class="collapse navbar-collapse" id="navbarSupportedContent">
							<ul class="navbar-nav ml-auto">
								<li class="nav-item ">
									<a class="nav-link" href="index.html"><span class="sr-only">(current)</span>Home</a>
								</li>
								<li class="nav-item dropdown drop_single">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="javascript:void(0)">Pages</a>
									<ul class="dropdown-menu dd_first">
										<li><a href="#">Link</a></li>
										<li><a href="#">Link</a></li>
										<li><a href="#">Link</a></li>
										<li><a href="#">Link</a></li>
									</ul>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="#">Price</a>
								</li>
								<li class="nav-item dropdown drop_single ">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="javascript:void(0)">Blogs</a>
									<ul class="dropdown-menu dd_first">
										<li class="dropdown">
											<a href="javascript:void(0)" class="dropdown-toggle" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Blog Grid</a>
											<ul class="dropdown-menu submenu">
												<li><a href="#">blog Full width</a></li>
												<li><a href="#">blog Left sidebar</a></li>
												<li><a href="#">blog Right Sidebar</a></li>
											</ul>
										</li>
										<li class="dropdown">
											<a href="javascript:void(0)" class="dropdown-toggle" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Single Blog</a>
											<ul class="dropdown-menu submenu">
												<li><a href="#">Blog Single Right Sidebar</a></li>
												<li><a href="#">Blog Single left Sidebar</a></li>
												<li><a href="#">Blog Single Fullwidth Sidebar</a></li>
											</ul>
										</li>
									</ul>
								</li>
								<li class=" dropdown megaDropMenu nav-item " >
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="javascript:void(0)">Elements</a>
									<ul class="row dropdown-menu justify-content-md-between">
										<li class="">
											<h6>Sub Heading</h6>
											<ul class="list-unstyled">
												<li><a href="#">Link</a></li>
												<li><a href="#">Link</a></li>
												<li><a href="#">Link</a></li>
												<li><a href="#">Link</a></li>
											</ul>
										</li>
										<li class="">
											<h6>Sub Heading</h6>
											<ul class="list-unstyled">
												<li><a href="#">Link</a></li>
												<li><a href="#">Link</a></li>
												<li><a href="#">Link</a></li>
												<li><a href="#">Link</a></li>
											</ul>
										</li>
										<li class="">
											<h6>Sub Heading</h6>
											<ul class="list-unstyled">
												<li><a href="#">Link</a></li>
												<li><a href="#">Link</a></li>
												<li><a href="#">Link</a></li>
												<li><a href="#">Link</a></li>
											</ul>
										</li>
										<li class="">
											<h6>Sub Heading</h6>
											<ul class="list-unstyled">
												<li><a href="#">Link</a></li>
												<li><a href="#">Link</a></li>
												<li><a href="#">Link</a></li>
												<li><a href="#">Link</a></li>
											</ul>
										</li>
										<li class="">
											<h6>Sub Heading</h6>
											<ul class="list-unstyled">
												<li><a href="#">Link</a></li>
												<li><a href="#">Link</a></li>
												<li><a href="#">Link</a></li>
												<li><a href="#">Link</a></li>
											</ul>
										</li>
									</ul>
								</li>
								<!-- Contact Button Starts -->
								<li class="nav-item ">
									<a class="nav-link contact-btn" href="#">Contact button</a>
								</li>
							</ul>
						</div>
					</div>
				</nav>
How to use

You have to use Bootstrap version 4
use class .main-nav as following few classes stylied inheriting this class
for the single layer dropdown use .drop_single with .dropdown
For the first layer dropdown menu use class .dd-first with .dropdown-menu
For the single layer dropdown use .megaDropMenu with .dropdown