"navbar with bootstrap4"
Bootstrap 4.0.0 Snippet by Shakibur22

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <header class="header"> <div class="container"> <nav class="navbar navbar-expand-lg navbar-light"> <a class="navbar-brand" href="#"><p class="ab">The Big Lebowski</p></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> </ul> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link ac" href=""><p class="a">Home</p></a> </li> <li class="nav-item"> <a class="nav-link" href=""><p class="a">About</p></a> </li> <li class="nav-item"> <a class="nav-link" href=""><p class="a">Contact</p></a> </li> </ul> </div> </nav> </div> </header> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="js/jquery-3.2.1.slim.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
/*global section starts here*/ body{ background-color: #2b2e32; } /*global section ends here*/ /*header section starts here*/ .header{ background-color: #2b2e32; border: 2px solid #1c1e22; } .collapse ul li{ width: 70px; margin: 0 5px; } .nav-item a{ background-color: #1c1e22; } .nav-item .ac{ background-color: black; } .a{ color: white; margin-top: 15px; } .nav-item a:hover{ background-color: black; } .ab{ color: #bab5b5; margin-top: 15px; } .navbar{ margin: 0; padding: 0; } .navbar-brand:hover p{ color: white; } /*header section ends here*/

Related: See More

Paper Dashboard 2
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Bootstrap 4 Navbar with Icon Top
Transparent Sticky NavBar

Questions / Comments: