Navigation

Navbar

We have worked with the default Bootstrap Navbar and created three variations in colour: .navbar-white, .navbar-black and .navbar-navy. You can see an example of a white navbar below:

<nav class="navbar navbar-light navbar-expand-md navbar-white navbar-1 justify-content-between" id="area-1">
	<div class="container">
	    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav-1">
	        <span class="navbar-toggler-icon"></span>
	    </button>
	    <div class="navbar-collapse collapse dual-nav dual-nav-1 w-100">
	        <ul class="navbar-nav">
	            <li class="nav-item active">
	              <a class="nav-link" href="#">Men
	                <span class="sr-only">(current)</span>
	              </a>
	            </li>
	            <li class="nav-item">
	              <a class="nav-link" href="#">Women</a>
	            </li>
	            <li class="nav-item dropdown">
	              <a class="nav-link" href="#">
	                Boys
	              </a>
	            </li>
	            <li class="nav-item">
	              <a class="nav-link" href="#">Girls</a>
	            </li>
	        </ul>
	    </div>
	    <a href="/" class="navbar-brand mx-auto d-block text-center w-100">grace</a>
	    <div class="navbar-collapse collapse dual-nav dual-nav-1 w-100">
	        <ul class="nav navbar-nav ml-auto">
	            <li class="nav-item active">
	              <a class="nav-link" href="#">Login
	                <span class="sr-only">(current)</span>
	              </a>
	            </li>
	            <li class="nav-item">
	              <a class="nav-link" href="#">Sign up</a>
	            </li>
	            <li class="nav-item dropdown">
	              <a class="btn btn-sm btn-icon btn-navy  dropdown-toggle shopping-cart ml-md-4" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
	                aria-haspopup="true" aria-expanded="false">
	                <i class="fas fa-shopping-cart"></i>
	              </a>
	              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
	                <a class="dropdown-item" href="#">Empty Cart!</a>
	              </div>
	            </li>
	        </ul>
	    </div>
	</div>
</nav>

Double Navbar

If you have a lot of links in your navigation or you just want to display more information, you can use the double navbar. This basically means having 2 navbars, one with the class .top-navbar and one with the class .bottom-navbar.

Overlays

If you want a link in your navbar to open an overlay navigation (a layer that takes up the whole page), you can use the overlay functionality. You can see an example below:

Navbar

Overlay

<!-- the navbar -->
<div class="double-navbar-1">
	<nav class="navbar navbar-dark navbar-expand-md navbar-navy navbar-top justify-content-between">
		<div class="triangle d-none d-md-block"></div>
		<div class="container">
		    <div class="navbar-collapse collapse dual-nav w-100">
		        <ul class="navbar-nav">
		            <li class="nav-item">
		              <a class="nav-link" href="#">
			              <i class="fab fa-facebook-f"></i>
		              </a>
		            </li>
		            <li class="nav-item">
		              <a class="nav-link" href="#">
			              <i class="fab fa-twitter"></i>
		              </a>
		            </li>
		        </ul>
		    </div>
		    <a href="/" class="navbar-brand mx-auto d-block text-center w-100">grace</a>
			<div class="menu-overlay w-100">
	              <a class="nav-link open-overlay" data-overlay="2" href="#a">
		              <i class="fas fa-search"></i>
	              </a>
			</div>
		</div>
	</nav>
	<nav class="navbar d-none d-md-block navbar-dark navbar-expand-md navbar-twilight navbar-bottom justify-content-center">
		<div class="container">
		    <div class="navbar-collapse collapse dual-nav w-100 justify-content-center">
		        <ul class="navbar-nav">
		            <li class="nav-item active">
		              <a class="nav-link" href="#">Tech</a>
		            </li>
		            <li class="nav-item">
		              <a class="nav-link" href="#">Science</a>
		            </li>
		            <li class="nav-item">
		              <a class="nav-link" href="#">Health</a>
		            </li>
		            <li class="nav-item">
		              <a class="nav-link" href="#">Sports</a>
		            </li>
		            <li class="nav-item">
		              <a class="nav-link" href="#">Arts</a>
		            </li>
		            <li class="nav-item">
		              <a class="nav-link" href="#">Style</a>
		            </li>
		            <li class="nav-item">
		              <a class="nav-link" href="#">Food</a>
		            </li>
		            <li class="nav-item">
		              <a class="nav-link" href="#">Travel</a>
		            </li>
		        </ul>
		    </div>
		</div>
	</nav>
</div>

<!-- the overlay -->
<div id="overlay-2" class="overlay overlay-2" style="background-image: url('assets/media/img/headers/overlay_1.png');">
  <a href="javascript:void(0)" class="close-btn close-overlay" data-overlay="2">&times;</a>
  <div class="overlay-content">
	  <div class="brand text-center">
		  grace
	  </div>
	  <div class="menu">
		  <ul class="list-unstyled">
			  <li>
			  	<a href="#a">Recipes</a>
			  </li>
			  <li class="active">
			  	<a href="#a">Food</a>
			  </li>
			  <li>
			  	<a href="#a">Drink</a>
			  </li>
			  <li>
			  	<a href="#a">Travel</a>
			  </li>
			  <li>
			  	<a href="#a">Style</a>
			  </li>
		  </ul>
	  </div>
	  <div class="bottom-area">
		 <div class="menu-links">
		  <ul class="list-unstyled">
			  <li>
			  	<a href="#a">About</a>
			  </li>
			  <li>
			  	<a href="#a">Reviews</a>
			  </li>
			  <li>
			  	<a href="#a">News</a>
			  </li>				 
		 </div>
		 <div class="search">
			 <a href="#a" class="btn btn-link btn-white">
				 <i class="fas fa-search"></i>
			 </a>
		 </div>		  
	  </div>
  </div>
</div>

//javascript that opens and closes the overlay
$('.open-overlay').click(function() {
	var id = $(this).data('overlay');
	document.getElementById("overlay-" + id).style.height = "100%";
});

$('.close-overlay').click(function() { 
	var id = $(this).data('overlay');
	document.getElementById("overlay-" + id).style.height = "0%";
});

Footer

There are three colour possibilities for the footer .footer-white, .footer-black and .footer-navy. Here is an example of a white footer.

<footer class="footer-1 footer-white">
	<div class="container">
		<div class="row">
			<div class="col-12 col-md-3 text-center text-md-left">
				<div class="footer-brand">
					<a href="#a" class="brand">grace</a>
				</div>
				<div class="copyright">
					© <script>document.write(new Date().getFullYear())</script> Grace
				</div>
			</div>
			<div class="col-12 col-md-7">
				<div class="menu text-center text-md-left">
					<ul class="list-unstyled">
						<li>
							<a href="#a">Tech</a>
						</li>
						<li>
							<a href="#a">Science</a>
						</li>
						<li>
							<a href="#a">Health</a>
						</li>
						<li>
							<a href="#a">Sports</a>
						</li>
						<li>
							<a href="#a">Arts</a>
						</li>
						<li>
							<a href="#a">Style</a>
						</li>
						<li>
							<a href="#a">Food</a>
						</li>
						<li>
							<a href="#a">Travel</a>
						</li>
					</ul>
				</div>
				<div class="address text-center text-md-left">
					<p>1433 Bedford Ave, Brooklyn, NY 11216 </p>
					<p>[phone]</p>
				</div>
			</div>
			<div class="col-12 col-md-2">
				<div class="social-menu  text-center text-md-right">
					<ul class="list-unstyled">
						<li>
							<a href="#a"><i class="fab fa-facebook-f"></i></a>
						</li>
						<li>
							<a href="#a"><i class="fab fa-twitter"></i></a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</footer>	

Double Footer

If you have a lot of information to display in the footer or you want to add a subscribe form, you can use the double footer. Like in the case of the navbar, you will need the .footer-top class for the div that is on top and the .footer-bottom class for the one at the bottom.

Here is an example:

<footer class="double-footer-1">
	<div class="footer-top footer-navy">
		<div class="container">
			<div class="row">
				<div class="col-12 col-md-2">
					<div class="footer-brand text-center text-md-left">
						<a href="#a" class="brand">grace</a>
					</div>
				</div>
				<div class="col-12 col-md-8">
					<div class="menu">
						<ul class="list-unstyled">
							<li>
								<a href="#a">Tech</a>
							</li>
							<li>
								<a href="#a">Science</a>
							</li>
							<li>
								<a href="#a">Health</a>
							</li>
							<li>
								<a href="#a">Sports</a>
							</li>
							<li>
								<a href="#a">Arts</a>
							</li>
							<li>
								<a href="#a">Style</a>
							</li>
							<li>
								<a href="#a">Food</a>
							</li>
							<li>
								<a href="#a">Travel</a>
							</li>
						</ul>
					</div>
					<div class="links-menu">
						<ul class="list-unstyled">
							<li>
								<a href="#a">Contact Us</a>
							</li>
							<li>
								<a href="#a">About Us</a>
							</li>
							<li>
								<a href="#a">Advertising</a>
							</li>
							<li>
								<a href="#a">Stockists</a>
							</li>
							<li>
								<a href="#a">Press</a>
							</li>
							<li>
								<a href="#a">Privacy Policy</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-12 col-md-2">
					<div class="social-menu text-center text-md-right">
						<ul class="list-unstyled">
							<li>
								<a href="#a"><i class="fab fa-facebook-f"></i></a>
							</li>
							<li>
								<a href="#a"><i class="fab fa-twitter"></i></a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>				
	</div>
	<div class="footer-bottom footer-black">
		<div class="container">
			<div class="row">
				<div class="col-12 col-md-6 offset-md-3">
					<div class="input-group subscribe">
					  <input type="text" class="form-control" placeholder="Email" aria-label="Recipient's username" aria-describedby="basic-addon2">
					  <div class="input-group-append">
			            <a href="#" class="btn btn-white next">
				            Submit
	                        <span class="icon icon-arrow-right"></span>
	                    </a>
					  </div>
					</div>
					<div class="copyright text-center">
						Copyright <script>document.write(new Date().getFullYear())</script> Grace
					</div>	
				</div>				
			</div>
		</div>
	</div>
</footer>

If you want to see more examples and properties please check the official Bootstrap Documentation.