<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 ----------> <div class="container"> <nav class="navbar navbar-expand-md navbar-dark"> <a class="navbar-brand" href="index.html"> <img src="https://via.placeholder.com/75" alt="Logo"> </a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link" href="#"> About us </a> </li> <li class="nav-item"><a class="nav-link" href="#"> Products </a> </li> <li class="nav-item"><a class="nav-link" href="product_usages.html">Product Uses </a> </li> <li class="nav-item"><a class="nav-link" href="#">Designs Capabilites</a> </li> <li class="nav-item"><a class="nav-link" href="#">Resources</a> </li> <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Blog</a> <div class="dropdown-menu" aria-labelledby="navbardrop"><a class="dropdown-item" href="#">CLOSETS</a> <a class="dropdown-item" href="#">SHELVING</a> <a class="dropdown-item" href="#">GARAGE</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact us</a> </li> </ul> </div> </nav> </DIV>

.navbar-dark #collapsibleNavbar .navbar-nav .nav-link { color: #000000; } .navbar-expand-md .navbar-collapse { background-image: linear-gradient(to bottom, #ffffff, #f2f2f2); background-repeat: repeat-x; }