"Bootstrap Responsive Header | Bootstrap Header"
Bootstrap 4.1.1 Snippet by sandeepchhn5

<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 rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> <div class="container"> <div class="row"> <h2>bootstrap responsive header with Right Navbar by (schauhan.in) </h2> </div> </div> <div class="top_nav"> <div class="container"> <div class="row"> <div class="col-md-6 col-12 col-12 text-left"><i class="fa fa-phone"></i> +91-0000000000 | <i class="fa fa-envelope"></i> info@jaygurubande.com</div> <div class="col-md-6 col-12 col-3 donate ml-auto"> <ul class="float-right"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-youtube"></i></a></li> <li><a href="#"><i class="fa fa-instagram"></i></a></li> <li><a class="mybt" href="#">Donate Now</a></li> </ul> </div> </div> </div> </div> <div class="container-fluid mynav"> <nav class="navbar navbar-expand-lg navbg static-top"> <div class="container"> <img src="http://schauhan.in/Examples/Navbar-over-carousel/images/logo.png" alt=""> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"><i class="fa fa-navicon"></i></span> </button> <div class="collapse navbar-collapse navi" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"><a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> About us </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">About Company</a> <a class="dropdown-item" href="#">Vision & Mission</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="A1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Our Services </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Logo Designing</a> <a class="dropdown-item" href="#">Graphics designing</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="A2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Web </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Static Website</a> <a class="dropdown-item" href="#">Dynamic Website</a> </div> </li> <li class="nav-item"><a class="nav-link" href="#">Clients</a></li> <li class="nav-item"><a class="nav-link" href="http://www.schauhan.in/how-to-earn-money-with-amazon-affiliate-marketing/">Amazon Affiliate Program</a></li> <li class="nav-item"><a class="nav-link" href="http://www.schauhan.in/bootstrap-navbar-overtop-carousel/">SCHAUHAN.IN</a></li> </ul> </div> </div> </nav> </div> <div class="slider"> <div id="demo" class="carousel slide" data-ride="carousel"> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <div class="carousel-inner"> <div class="carousel-item active"> <img src="http://schauhan.in/Examples/Navbar-over-carousel/images/slider/1.jpg" width="100%"> </div> <div class="carousel-item"> <img src="http://schauhan.in/Examples/Navbar-over-carousel/images/slider/2.jpg" width="100%"> </div> <div class="carousel-item"> <img src="http://schauhan.in/Examples/Navbar-over-carousel/images/slider/3.jpg" width="100%"> </div> </div> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div>
body { font-family: 'Open Sans' ; } h1,h2,h3,h4,h5,h6,ul,li,p { margin:0px; padding:0px; } body::-webkit-scrollbar { width: 5px; } body::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1); } body::-webkit-scrollbar-thumb { background-color: #333; outline: 1px solid #000; } h1,h2,h3,h4,h5,h6,p,ul,li { margin:0px; padding:0px; } .container-fluid { padding: 0px;} .bg-dark { background-color: transparent; } .mynav { background:#fff; } .navbar { padding:15px; } .navbar-nav .nav-item a { color:#333; font-size:14px; font-weight:500; text-transform:uppercase; } .navbar-nav .dropdown .dropdown-menu, .navbar-nav .dropdown .dropdown-menu a { margin:0px; padding:0px; color:#000; } .navbar-nav .dropdown .dropdown-menu a { padding:5px 10px; border-bottom:1px solid #f2f2f2; } .top_nav { width:100%; height:40px; line-height:40px; border-bottom:1px solid #f2f2f2; color:#333; font-size:14px; } .mybt { margin-left:20px; font-size:12px; height:40px; font-size:15px; width:120px; text-align:center; display:block; line-height:40px; background:#f2a500; color:#fff; transition:all ease-in-out 0.1s; } .mybt a { color:#fff; transition:all ease-in-out 0.1s; } .mybt:hover, .mybt a:hover { background:#f6413e; color:#fff; text-decoration:none; } .donate { height:40px; line-height:40px; } .donate ul { margin:0px; padding:0px; } .donate ul li { display:inline-block; padding:0px 5px; line-height:25px; height:25px; border-right:1px solid #f2f2f2; } .donate ul li a { color:#e22a38; } .donate ul li i { font-size:16px; } @media (max-width: 767px) { .navbar-toggler .navbar-toggler-icon i { color:#333; } .mynav .navbar-toggler .navbar-toggler-icon { color:#fff; outline:0px;} .navbg { background:none; -webkit-box-shadow: 0px 0px 0px 0px rgba(128,128,128,1); -moz-box-shadow: 0px 0px 0px 0px rgba(128,128,128,1); box-shadow: 0px 0px 0px 0px rgba(128,128,128,1); } .mynav img { width:20%; } .navbar-collapse { border-radius:5px; background-color:rgba(0,0,0,0.8); -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75); } .navbar-nav .nav-item { padding:0px 10px; border-bottom:1px solid #565963; } .navbar-nav .nav-item a { color:#fff; } .navbar-nav .nav-item:last-child { border:none; } .top_nav { text-align:center; font-size:12px; } .donate { display:none; } .mybt { font-size:12px; height:40px; font-size:12px; width:100px; text-align:center; display:block; line-height:40px; background:#f2a500; color:#fff; transition:all ease-in-out 0.1s; } .mybt a { color:#fff; transition:all ease-in-out 0.1s; } .mybt:hover, .mybt a:hover { background:#f6413e; color:#fff; text-decoration:none; } }

Related: See More


Questions / Comments: