<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.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> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <header class=" bg-family fixed-top"> <div class="container"> <nav class="navbar navbar-expand-lg navbar-dark border-bottom "> <a class="navbar-brand" href="#"> <img src="https://www.brighttalk.com/wp-content/themes/brighttalk-theme/assets/images/BrightTALK-logo.svg" alt="Logo" style="width:120px;"> </a> <button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav ml-auto pl-2"> <!-- Menu profile goes here --> <li class="nav-item bg-success text-white d-lg-none d-md-none pt-5 pl-3 shadow border-bottom bg-1"> <img src="https://www.brighttalk.com/wp-content/themes/brighttalk-theme/assets/images/BrightTALK-logo.svg" alt="Logo" style="width:120px;"> </a> <a href="#" class="text-white"><p>user@user.com</p></a> </li> <!-- Menu profile ends here --> <li class="nav-item"> <a class="nav-link btn-outline-success1 pl-4 " href="#"><i class="fa fa-home mr-2"></i>HOME</a> </li> <li class="nav-item"> <a class="nav-link btn-outline-success1 pl-4 " href="#"><i class="fa fa-user mr-2"></i>ABOUT US</a> </li> <li class="nav-item"> <a class="nav-link btn-outline-success1 pl-4" href="#"><i class="fa fa-exchange mr-2"></i>MENU</a> </li> <li class="nav-item"> <a class="nav-link btn-outline-success1 pl-4" href="#"><i class="fa fa-shopping-cart mr-2"></i>ORDER</a> </li> <li class="nav-item"> <a class="nav-link btn-outline-success1 pl-4 " href="#"><i class="fa fa-phone mr-2"></i>CONTACT US</a> </li> </ul> </div> </nav> </div> </header> <div class="menu-overlay"></div> <div class="mt-5"></div> <section class="py-5" bg-warning> <div class="container"> <div class="row border-bottom"> <div class="col-md-10 col-sm-7"> <h4>Mutton Burra</h4> <small style="font-style: italic;">Double chops of mutton, marinated with spices and creamy yogurt and roasted until juicy and smoky.</small> </div> <div class="col-md-2 col-sm-5"> <div class="form-group"> <label for="sel1">Select list:</label> <select class="form-control" id="sel1"> <option>1/2 Plate</option> <option>1 Plate</option> <option>1.5 Plate</option> <option>2 Plate</option> <option>2.5 Plate</option> <option>3 Plate</option> <option>3.5 Plate</option> <option>4 Plate</option> <option>4.5 Plate</option> <option>5 Plate</option> <option>5.5 Plate</option> <option>6 Plate</option> <option>6.5 Plate</option> <option>7 Plate</option> <option>7.5 Plate</option> <option>8 Plate</option> <option>9 Plate</option> <option>10 Plate</option> <option>11 Plate</option> </select> </div> <small class="text-danger">Estimate : 1250/-</small> </div> </div> </div> </section>

.bg-family {background: #041137; color:#041137 !important;} .btn-outline-success {background: #041137; color:#DAA520 !important;} .btn-outline-success1:hover {background: #DAA520; color:#041137 !important;} /* menu items ***************/ @media only screen and (max-width: 767px) { #navbarTogglerDemo02 { position: fixed; top: 0; left: -8px; z-index: 99; width: 280px; height: 100%; background-color: #041137; overflow: auto; box-shadow: 0px 1px 25px #3c3c3c; } .menu-overlay { display: none; background-color: #000; bottom: 0; left: 16px; opacity: 0.5; filter: alpha(opacity=50); /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 49; } .navbar-light .navbar-nav .nav-link { /* border-bottom: 1px solid #28a745;} */ } /* menu items end here ***************/ img {width:100%;} .bg-1 { background-image: url("https://images.pexels.com/photos/693776/pexels-photo-693776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"); background-color: #cccccc; }

$('[data-toggle="slide-collapse"]').on('click', function() { $navMenuCont = $($(this).data('target')); $navMenuCont.animate({ 'width': 'toggle' }, 350); $(".menu-overlay").fadeIn(500); }); $(".menu-overlay").click(function(event) { $(".navbar-toggler").trigger("click"); $(".menu-overlay").fadeOut(500); });