"Bootstrap 4.1.1 Nav"
Bootstrap 4.1.1 Snippet by junj2019

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <html> <head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-sm navbar-light navbar-cs"> <a class="navbar-brand" href="#">NavSite</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample" aria-controls="navbarsExample" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarsExample"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-home fa-lg"></i> Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="galleryDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-camera-retro fa-lg"></i> Gallery </a> <div class="dropdown-menu" aria-labelledby="galleryDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class=" fas fa-phone-square-alt fa-lg"></i> Contact</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="far fa-question-circle fa-lg"></i> About</a> </li> </ul> </div> </nav> <div class="jumbotron"> <div class="col-sm-8 mx-auto"> <h1>Navbar examples</h1> <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p> <p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p> <p> <a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a> </p> </div> </div> </body> </html>
.navbar { border-bottom: 1px solid #5FB0E4; } .navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,.85); } .navbar { min-height:55px !important; padding-top: 5px!important; padding-bottom: 0px!important; } .navbar-cs { background-color: #FFF; border-color: #5FB0E4; border-radius: 0; margin-bottom: 0; } .navbar-cs .navbar-nav>li>a { border: 0 solid #5FB0E4; padding: 12px 15px; } .navbar-cs .navbar-nav>li:not(.disabled)>a:hover{ border-bottom-width:5px; padding-bottom:7px; } .dropdown-menu { margin-top: 0px; } .navbar-light .navbar-brand, .navbar-light .navbar-nav .nav-link { color: #007bff; } .navbar-brand:focus, .navbar-light .navbar-brand:hover, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { color: #0062cc; } .dropdown-item { border-left: 0 solid #5FB0E4; /* color: #787878; */ /* font-size: 16px; */ font-weight: 400; padding: 10px 20px; white-space: nowrap; } .dropdown-itema:focus, .dropdown-item:hover { background-color: #F5F5F5; border-left-width: 5px; padding-left: 15px; }

Related: See More

Material Dashboard Pro Angular

Questions / Comments: