"Responsive Admin Navbar"
Bootstrap 4.1.1 Snippet by Onlynfk

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html lang="en"> <head> <title>Title</title> <!-- 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="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300, 400,700|Inconsolata:400,700" rel="stylesheet"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- local --> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="fonts/ionicons/css/ionicons.min.css"> <link rel="stylesheet" href="fonts/fontawesome/css/font-awesome.min.css"> <link rel="stylesheet" href="fonts/flaticon/font/flaticon.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <!-- navbar --> <nav class="navbar navbar-expand-md navbar-light"> <button class="navbar-toggler ml-auto mb-2 bg-light" type="button" data-toggle="collapse" data-target="#myNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse " id="myNavbar"> <div class="container-fluid"> <div class="row"> <!-- sidebar navbar --> <div class="col-lg-3 col-xl-2 col-md-4 sidebar fixed-top"> <a href="#" class="navbar-brand text-white d-block mx-auto text-center mb-4 bottom-border pb-2"> CodeAdmin </a> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" width="50"height="50" alt="nice" class="rounded-circle mr-3"> <a href="#" class="text-white ">Bode Maegsn </a> <div class="border-bottom pb-3"></div> <ul class="navbar-nav flex-column mt-4"> <li class="nav-item"> <a href="#" class="nav-link text-light p-3 mb-2 current"> <i class="fa fa-home text-light fa-lg mr-3" aria-hidden="true"></i> Dashboard </a> </li> <li class="nav-item"> <a href="#" class="nav-link text-light p-3 mb-2 sidebar-link"> <i class="fa fa-user text-light fa-lg mr-3" aria-hidden="true"></i> Profile </a> </li> <li class="nav-item"> <a href="#" class="nav-link text-light p-3 mb-2 sidebar-link"> <i class="fa fa-envelope text-light fa-lg mr-3" aria-hidden="true"></i> Inbox </a> </li> <li class="nav-item"> <a href="#" class="nav-link text-light p-3 mb-2 sidebar-link"> <i class="fa fa-shopping-cart text-light fa-lg mr-3" aria-hidden="true"></i> Sales </a> </li> <li class="nav-item"> <a href="#" class="nav-link text-light p-3 mb-2 sidebar-link"> <i class="fa fa-table text-light fa-lg mr-3" aria-hidden="true"></i> Analytics </a> </li> <li class="nav-item"> <a href="#" class="nav-link text-light p-3 mb-2 sidebar-link"> <i class="fas fa-table text-light fa-lg mr-3" aria-hidden="true"></i> Charts </a> </li> <li class="nav-item"> <a href="#" class="nav-link text-light p-3 mb-2 sidebar-link"> <i class="fa fa-table text-light fa-lg mr-3" aria-hidden="true"></i> Tables </a> </li> <li class="nav-item"> <a href="#" class="nav-link text-light p-3 mb-2 sidebar-link"> <i class="fa fa-wrench text-light fa-lg mr-3" aria-hidden="true"></i> Settings </a> </li> <li class="nav-item"> <a href="#" class="nav-link text-light p-3 mb-2 sidebar-link"> <i class="fa fa-file text-light fa-lg mr-3" aria-hidden="true"></i> Documentation </a> </li> </ul> </div> <!-- end sidebar --> <!-- top nav--> <div class="col-lg-9 col-xl-10 col-md-8 ml-auto bg-dark fixed-top py-2 top-navbar"> <div class="row align-items-center"> <div class="col-md-4"> <h4 class="text-light text-uppercase mb-0">Dashboard</h4> </div> <div class="col-md-5"> <form> <div class="input-group"> <input type="text" class="form-control"id="search-input" placeholder="Search here"> <button type="button" class="btn btn-light"id="search-button"><i class="fa fa-search text-danger"></i></button> </div> </form> </div> <div class="col-md-3"> <ul class="navbar-nav"> <li class="nav-item icon-parent"> <a href="#" class="nav-link icon-bullet "><i class="fa fa-comments text-muted fa-lg"></i></a> </li> <li class="nav-item icon-parent"> <a href="#" class="nav-link icon-bullet"><i class="fa fa-bell text-muted fa-lg"></i></a> </li> <li class="nav-item ml-md-auto "> <a href="#" class="nav-link "><i class="fa fa-sign-out text-danger fa-lg"></i></a> </li> </ul> </div> </div> </div> <!-- end nav --> </div> </div> </div> </nav> <!-- end navbar --> <!-- local --> <script type="text/javascript " src="script.js "></script> <script src="js/bootstrap.min.js "></script> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo " crossorigin="anonymous "></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js " integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1 " crossorigin="anonymous "></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js " integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM " crossorigin="anonymous "></script> </body> </html> </html>
body { font-family: "Inconsolata", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 300; font-size: 18px; } /* navbar */ .sidebar { height: 100vh; background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .9)), url(images/img1.jpeg); background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: 5px 7px 25px #999; } .bottom-border { border-bottom: 1px groove#eee; } .sidebar-link { transition: all .4s; } .sidebar-link:hover { background-color: #444; border-radius: 5px; } .current { background-color: #f44336; border-radius: 7px; box-shadow: 2px 5px 10px #111; transition: all .3s; } .current:hover { background-color: #f66436; border-radius: 7px; box-shadow: 2px 5px 20px #111; transform: translateY(-1px); } #search-input{ background: transparent; border: none; border-radius: 0; border-bottom: 2px solid #999; transition: all .4s; } #search-input:focus{ background: transparent; box-shadow: none; border-bottom: 2px solid #dc3545; } #search-button{ border-radius: 50%; padding: 10px 16px; transition: all .4s; } #search-button:hover{ background-color: #eee; transform: translateY(-1px); } .icon-parent{ position: relative; } .icon-bullet::after{ content: ""; position: absolute; top: 7px; left: 15px; height: 12px; width: 12px; background-color:#f44336; border-radius: 50%; } @media (max-width: 768px) { .sidebar{ position: static; height: auto; } .top-navbar{ position: static; } } /* end navbar */

Related: See More


Questions / Comments: