"nav "
Bootstrap 4.1.1 Snippet by huabin

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 ----------> <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 ----------> <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> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Header + Video</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://mdbootstrap.com/previews/docs/latest/css/bootstrap.min.css" rel="stylesheet"> <link href="https://mdbootstrap.com/previews/docs/latest/css/mdb.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <!--Main Navigation--> <header> <nav class="navbar navbar-expand-lg navbar-dark default-color-dark fixed-top" style="padding-top: 0px; padding-bottom: 0px"> <a class="navbar-brand" href="index.html">MyTrips</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 navbar-left mr-auto"> <li class="nav-item"> <a class="nav-link" href="3"> <span class="badge badge-success"> Destinations </span> </a> </li> <li class="nav-item"> <a class="nav-link" href="3"> <span class="badge badge-success">Beaches </span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span class="badge badge-success">Cruises </span> </a> </li> </ul> <ul class="navbar-nav navbar-right ml-auto nav-flex-icons"> <li class="nav-item"> <a class="nav-link waves-effect waves-light"><i class="fa fa-envelope fa-1x"></i><span class="badge badge-danger badge-pill">2</span></a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light"><i class="fa fa-bullhorn"></i><span class="badge badge-danger badge-pill">1</span></a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light"><button class="btn btn-sm btn-primary">Join</button></a> </li> <!--<li> <button class="btn btn-sm btn-primary">Join</button> </li>!--> </ul> </div> </nav> </header> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/popper.min.js"></script> <script src="https://mdbootstrap.com/previews/docs/latest/js/bootstrap.min.js"></script> <script src="https://mdbootstrap.com/previews/docs/latest/js/mdb.min.js"></script> <script src="https://mdbootstrap.com/previews/docs/latest/js/jarallax.js"></script> <script src="https://mdbootstrap.com/previews/docs/latest/js/jarallax-video.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <script> new WOW().init(); </script> </body> </html>
body{ font-family: 'Roboto', sans-serif; } nav{ font-family: 'Roboto', sans-serif; font-size: 14px; } .navbar-brand{ position: relative; text-shadow: #000 0 0px 2px; top: 0px; } .btn.btn-sm{ margin: 0 ; padding: 0; font-size: 14px; font-weight: 900; } nav.default-color-dark { background-color: #87CEEB; background-image: linear-gradient(#87CEEB, #03b2f9 100%); border-bottom: 1px solid #4abdec; min-height: 42px; position: relative; z-index: 1 } .navbar-right .nav-link{ min-width: 50px; position: relative; } .nav-item i.fa{ position: relative; z-index: 98; padding-top: 9px; } .navbar-left .nav-item .nav-link .badge{ padding: 6px; font-size: 14px; } .navbar-right .nav-item .badge{ position: absolute; left: 18px; top: 8px; z-index: 99; width: auto; text-align: center; border-radius: 10px; font-size: 10px; padding-left: 5px; padding-right: 5px; font-weight: 200; }

Related: See More

Vue Light Bootstrap Dashboard

Questions / Comments: