Navigation
Last updated
Last updated
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>
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.
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:
<!-- 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">×</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%";
});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>+1 347-305-3233</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> 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.
