<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-lg navbar-light bg-warning"> <a class="navbar-brand" href="index.html"><span>K</span>rishna</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 ml-auto topnav"> <li class="nav-item active"> <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </nav> </div>

.topnav a:hover { border-bottom: 3px solid red; } .navbar-brand { display: inline-block; padding-top: 10px; padding-bottom: 0.3125rem; margin-left: 2%; scroll-padding-left: 10%; margin-right: 1rem; font-size: 1.25rem; line-height: inherit; white-space: nowrap; font-weight: 900; font-size: 26px; position: relative; z-index: 0; font-weight:1000; font:bold; } .navbar-brand:hover{ color:black; } .navbar-brand:after { position: absolute; top: 50%; left: -12px; width: 40px; height: 40px; content: ''; background: blue; z-index: -1; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .navbar-brand>span{ color: #fff; }