<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 ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a href="" class="navbar-brand"><b>LOGO</b></a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a href="#" class="nav-link">Home</a> </li> <li class="nav-item"> <a href="#" class="nav-link">About</a> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link" data-toggle="dropdown" data-target="menuDrop">Services <i class="dropdown-toggler"></i></a> <div class="dropdown-menu"> <a href="" class="dropdown-item">Website development</a> <div class="dropdown-divider"></div> <a href="" class="dropdown-item">App Development</a> <div class="dropdown-divider"></div> <a href="" class="dropdown-item">SEO & SMO</a> <div class="dropdown-divider"></div> <a href="" class="dropdown-item">Web Hosting</a> </div> </li> <li class="nav-item"> <a href="#" class="nav-link">Blog</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Contact</a> </li> <li class="nav-item"> <a href="#" class="nav-link"><i class="fa fa-search"></i></a> </li> </ul> </div> </div> </nav>

nav{ min-height:80px; } ul li.active a, ul li a:hover, ul li a:active, ul li a:focus { font-weight:bold; color:black; } ul li a{ margin-left:1em; transition:.3s ease; } .dropdown div a{ margin-left:0; } @media (max-width:990px){ ul li a { margin-left:0; } }