"Navbar Bootstrap 4.1.1 or header by Er. Om Nath"
Bootstrap 4.1.1 Snippet by omnath

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 ----------> <!DOCTYPE html> <html> <head> <title>Navbar By Om</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <!-- Fontawesome File --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Include Your Custom CSS File Here --> <link rel="stylesheet" type="text/css" href="../css/nav.css"> <!-- Include your custom Js File here --> <script src="../js/nav.js"></script> </head> <body> <div style="padding-bottom: 65px;"> <!-- Padding Youc can remove or addjust accourding to the shadow of the navbar --> <nav class="navbar navbar-expand-lg custom-navbar navbar-light fixed-top" id="main_navbar"> <a class="navbar-brand logo" href="#"> <label>Brand Logo</label> <!-- <img src="#" alt="logo" style="width:130px;"> --> </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"> <li class="nav-item active"> <a class="nav-link" href="#"><i class="fa fa-home"></i>Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle fa fa-cart-plus" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Shop </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li class="nav-item dropdown"> <a class="dropdown-item dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Service </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown1"> <li> <a class='dropdown-item' href='shop.php?p_cat=$p_cat_id'> Services </a> </li> <li> <a class='dropdown-item' href='shop.php?p_cat=$p_cat_id'> Services </a> </li> <li> <a class='dropdown-item' href='shop.php?p_cat=$p_cat_id'> Services </a> </li> </ul> </li> <div class="dropdown-divider"></div> <li> <a class="dropdown-item" href="#"> Service </a> </li> <div class="dropdown-divider"></div> <li> <a class="dropdown-item" href="#"> Service </a> </li> <div class="dropdown-divider"></div> <li class="nav-item dropdown"> <a class="dropdown-item dropdown-toggle" href="#" id="val1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Services </a> <ul class="dropdown-menu" aria-labelledby="val1"> <li class="dropdown-item"> <a href="#">Service</a> </li> <li class="dropdown-item"> <a href="#">Service</a> </li> <li class="dropdown-item"> <a href="#">Service</a> </li> </ul> </li> <div class="dropdown-divider"></div> <li> <a class="dropdown-item" href="#"> Combos </a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="fa fa-building-o"> </i> About Us </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="fa fa-volume-control-phone"> </i> Contact </a> </li> </ul> <div class="form-inline my-2 my-lg-0"> <form method="get" action="./search.php" class="form-horizontal" enctype="multipart/form-data"> <input class="form-control mr-sm-2" name="inputs" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" name="search" type="submit">Search</button> </form> </div> <ul class="navbar-nav "> <li class="nav-item dropdown form-inline"> <a class="nav-link" href="#"> <a class='nav-link fa fa-user' href='#'> Login </a> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="fa fa-shopping-basket"> </i> Cart <span class="dot text-center">0</span> </a> </li> </ul> </div> </nav> </div> <!-- For Help --> <div class="container"> <div class="contact text-center"> <p>For any help feel free to <a class="btn btn-success" href="https://www.facebook.com/er.omnath" target="_blank">Click me.
.dot { height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; display: inline-block; } .custom-navbar{box-shadow: 10px 10px 10px #eee; z-index:;background-color: #fff;} .navbar-icon-top .navbar-nav .nav-link > .fa { position: relative; width: 36px; font-size: 12px; height: 10px; } .navbar-icon-top .navbar-nav .nav-link > .fa > .badge { font-size: 0.75rem; right: 0; font-family: sans-serif; } .navbar-icon-top .navbar-nav .nav-link > .fa { top: 3px; line-height: 12px; } .navbar-icon-top .navbar-nav .nav-link > .fa > .badge { top: -10px; } .dropdown-menu { margin-top: 0; } .dropdown-menu .dropdown-toggle::after { vertical-align: middle; border-left: 4px solid; border-bottom: 4px solid transparent; border-top: 4px solid transparent; } .dropdown-menu .dropdown .dropdown-menu { left: 100%; top: 0%; margin:0 20px; border-width: 0; } .dropdown-menu > li a:hover, .dropdown-menu > li.show { background: #007bff; color: white; } .dropdown-menu > li.show > a{ color: white; } @media (min-width: 768px) { .dropdown-menu .dropdown .dropdown-menu { margin:0; border-width: 1px; } } /*Remove it if you use image*/ .logo label { color: green; font-family: bold; font-style: italic; } /*Contact me*/ .contact { padding-top: 60px; }
$(function () { $('#main_navbar').bootnavbar(); }); (function($) { var defaults={ sm : 540, md : 720, lg : 960, xl : 1140, navbar_expand: 'lg' }; $.fn.bootnavbar = function() { var screen_width = $(document).width(); if(screen_width >= defaults.lg){ $(this).find('.dropdown').hover(function() { $(this).addClass('show'); $(this).find('.dropdown-menu').first().addClass('show').addClass('animated fadeIn').one('animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd', function () { $(this).removeClass('animated fadeIn'); }); }, function() { $(this).removeClass('show'); $(this).find('.dropdown-menu').first().removeClass('show'); }); } $('.dropdown-menu a.dropdown-toggle').on('click', function(e) { if (!$(this).next().hasClass('show')) { $(this).parents('.dropdown-menu').first().find('.show').removeClass("show"); } var $subMenu = $(this).next(".dropdown-menu"); $subMenu.toggleClass('show'); $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) { $('.dropdown-submenu .show').removeClass("show"); }); return false; }); }; })(jQuery);

Related: See More

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

Questions / Comments: