"Bootstrap Navbar"
Bootstrap 4.0.0 Snippet by CreativeTim

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"> <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-expand-lg bg-rose"> <div class="container"> <div class="navbar-translate"> <a class="navbar-brand">Brand</a> <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span> </button> </div> <div class="collapse navbar-collapse"> <ul class="navbar-nav"> <li class="nav-item active"> <a href="#pablo" class="nav-link">link<div class="ripple-container"></div></a> </li> <li class="nav-item"> <a href="#pablo" class="nav-link">link</a> </li> </ul> <ul class="navbar-nav ml-auto"> <form class="form-inline ml-auto"> <div class="form-group has-white bmd-form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-white btn-raised btn-fab btn-round"> <i class="material-icons">search</i> </button> </form> </ul> </div> </div> </nav> <nav class="navbar navbar-expand-lg bg-info"> <div class="container"> <div class="navbar-translate"> <a class="navbar-brand">Info Color</a> <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span> </button> </div> <div class="collapse navbar-collapse"> <ul class="navbar-nav ml-auto"> <li class="active nav-item"> <a href="#pablo" class="nav-link"> Discover </a> </li> <li class="nav-item"> <a href="#pablo" class="nav-link"> Profile </a> </li> <li class="nav-item"> <a href="#pablo" class="nav-link"> Settings </a> </li> </ul> </div> </div> </nav> <nav class="navbar navbar-expand-lg bg-primary"> <div class="container"> <div class="navbar-translate"> <a class="navbar-brand">Primary Color</a> <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span> </button> </div> <div class="collapse navbar-collapse"> <ul class="navbar-nav ml-auto"> <li class="active nav-item"> <a href="#pablo" class="nav-link"> <i class="material-icons">explore</i> Discover </a> </li> <li class="nav-item"> <a href="#pablo" class="nav-link"> <i class="material-icons">account_circle</i> Profile <div class="ripple-container"></div></a> </li> <li class="nav-item"> <a href="#pablo" class="nav-link"> <i class="material-icons">settings</i> Settings </a> </li> </ul> </div> </div> </nav> <nav class="navbar navbar-inverse navbar-expand-lg bg-dark" role="navigation-demo"> <div class="container"> <div class="navbar-translate"> <a class="navbar-brand">Navbar with notification</a> <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span> </button> </div> <div class="collapse navbar-collapse"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a href="#pablo" class="nav-link"> Discover </a> </li> <li class="nav-item"> <a href="#pablo" class="nav-link"> Wishlist </a> </li> <li class="nav-item"> <a href="#pablo" class="btn btn-rose btn-raised btn-fab btn-round" data-toggle="dropdown"> <i class="material-icons">email</i> <div class="ripple-container"></div></a> </li> <li class="nav-item"> <a href="#pablo" class="profile-photo nav-link"> <div class="profile-photo-small"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT75LwIaPGKtOYPH16Ny7TzCDQPgMmUQOuMZMSIGrLmuFd9_Xho" alt="Circle Image" class="rounded-circle img-fluid"> </div> <div class="ripple-container"></div></a> </li> </ul> </div> </div> </nav> <nav class="navbar navbar-default navbar-expand-lg"> <div class="container"> <div class="navbar-translate"> <a class="navbar-brand" href="/presentation.html">Navbar with profile</a> <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span> </button> </div> <div class="collapse navbar-collapse"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a href="#pablo" class="nav-link"> Discover </a> </li> <li class="nav-item"> <a href="#pablo" class="nav-link"> Wishlist </a> </li> <li class="nav-item"> <a href="#pablo" class="btn btn-rose btn-raised btn-round " data-toggle="dropdown"> Register </a> </li> </ul> </div> </div> </nav> <nav class="navbar navbar-transparent navbar-expand-lg"> <div class="container"> <div class="navbar-header"> <button type="button" class="ml-auto navbar-toggler" data-toggle="collapse" data-target="#example-navbar-transparent"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#pablo">Transparent</a> </div> <div class="collapse navbar-collapse" id="example-navbar-transparent"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a href="#pablo" class="nav-link"> <i class="fa fa-facebook-square"></i> Facebook </a> </li> <li class="nav-item"> <a href="#pablo" class="nav-link"> <i class="fa fa-twitter"></i> Twitter </a> </li> <li class="nav-item"> <a href="#pablo" class="nav-link"> <i class="fa fa-instagram"></i> Instagram </a> </li> </ul> </div> </div> </nav> <footer class="footer text-center "> <p>Made with <a href="https://demos.creative-tim.com/material-kit/index.html" target="_blank">Material Kit</a> by Creative Tim</p> </footer> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script> <script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script> </body>
html *{ -webkit-font-smoothing: antialiased; } body{ background: url("http://deerwaves.com/wp-content/uploads/2017/07/mountain-names.jpg"); background-size: cover; } .navbar{ background: #fff; color: #555; padding: 10px 0 !important; margin-bottom: 20px; box-shadow: 0 4px 18px 0 rgba(0,0,0,0.12), 0 7px 10px -5px rgba(0,0,0,0.15) !important; } .navbar.bg-rose{ color: #fff; background-color: #e91e63 !important; box-shadow: 0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 12px -5px rgba(233,30,99,0.46); } .navbar.bg-dark{ color: #fff; background: #212121!important; box-shadow: 0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 12px -5px rgba(33,33,33,0.46); } .navbar.bg-info{ color: #fff; background: #00bcd4!important; box-shadow: 0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 12px -5px rgba(0,188,212,0.46); } .navbar.bg-primary{ color: #fff; background: #9c27b0!important; box-shadow: 0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 12px -5px rgba(156,39,176,0.46); } .navbar.navbar-transparent{ color: #fff; background: transparent; box-shadow: none !important; } .navbar.navbar-transparent .navbar-brand{ color: #fff; } .navbar .navbar-nav .nav-item .nav-link{ color: white; position: relative; color: inherit; padding: 15px; font-weight: 400; font-size: 12px; text-transform: uppercase; border-radius: 3px; line-height: 20px; } .navbar .navbar-nav .nav-item .nav-link i{ font-size: 20px; margin-top: -7px; top: 5px; position: relative; margin-right: 3px; } .navbar .navbar-nav .nav-item .nav-link i.fa{ margin-top: -4px; top: 2px; } .navbar .navbar-nav .nav-item.active .nav-link{ background-color: hsla(0,0%,100%,.1); border-radius: 4px; } .navbar .navbar-brand{ color: #555; font-weight: 300; font-size: 18px; } .btn{ position: relative; padding: 12px 30px !important; margin: .3125rem 1px; font-size: 12px !important; font-weight: 400 !important; text-decoration: none; text-transform: uppercase; letter-spacing: 0; cursor: pointer; background-color: transparent; border: 0; outline: 0; } .btn i{ margin-top: 0; position: absolute; width: 100%; -webkit-transform: none; transform: none; left: 0; top: 0; height: 100%; line-height: 41px; font-size: 20px; } .btn.btn-fab{ font-size: 24px; height: 41px; min-width: 41px; width: 41px; padding: 0 !important; overflow: hidden; position: relative; line-height: 41px; } .btn.btn-round{ border-radius:30px; } .btn.btn-rose{ color: #fff; background-color: #e91e63; border-color: #e91e63; -webkit-box-shadow: 0 2px 2px 0 rgba(233,30,99,0.14), 0 3px 1px -2px rgba(233,30,99,0.2), 0 1px 5px 0 rgba(233,30,99,0.12); box-shadow: 0 2px 2px 0 rgba(233,30,99,0.14), 0 3px 1px -2px rgba(233,30,99,0.2), 0 1px 5px 0 rgba(233,30,99,0.12) !important; } .btn.btn-rose:hover{ color: #fff; background-color: #ea2c6d; border-color: #b8124a; box-shadow: 0 14px 26px -12px rgba(233,30,99,0.42), 0 4px 23px 0 rgba(0,0,0,0.12), 0 8px 10px -5px rgba(233,30,99,0.2) !important; } .btn.btn-rose:focus{ color: #fff; background-color: #ea2c6d; border-color: #b8124a; } .btn.btn-white{ background-color: #fff; color: #999; } .btn.btn-white:hover{ background-color: #fff; color: #999; } .btn.btn-white:focus{ background-color: #fff; color: #999; } .nav-link.profile-photo{ padding: 0 !important; margin: 5px 3px 0; border-radius: 50% !important; } .profile-photo-small{ height: 40px; width: 40px; border-radius: 50%; } .rounded-circle{ border-radius: 50%; } .form-control{ color: white !important; } .form-control:focus{ box-shadow: none; } .form-control::placeholder{ color: white !important; font-weight: 400; font-size: 14px !important; } .has-white .form-control{ color: white; background-image: linear-gradient(to top,#fff 2px,rgba(255,255,255,0) 2px),linear-gradient(to top,#fff 1px,rgba(255,255,255,0) 1px) !important; } footer{ margin-top:200px; color: #555; background: #fff; padding: 25px; font-weight: 300; } .footer p{ margin-bottom: 0; } footer p a{ color: #555; font-weight: 400; } footer p a:hover{ color: #9f26aa; text-decoration: none; }
$(document).ready(function() { $('body').bootstrapMaterialDesign(); });

Related: See More


Questions / Comments: