<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 ----------> <nav class="navbar navbar-expand navbar-light bg-white p-0 border-bottom"> <div class="container"> <div class="collapse navbar-collapse"> <ul class="navbar-nav"> <li class="nav-item active"> <a href="" class="nav-link"> <svg viewBox="0 0 24 24"> <g> <path d="M22.46 7.57L12.357 2.115c-.223-.12-.49-.12-.713 0L1.543 7.57c-.364.197-.5.652-.303 1.017.135.25.394.393.66.393.12 0 .243-.03.356-.09l.815-.44L4.7 19.963c.214 1.215 1.308 2.062 2.658 2.062h9.282c1.352 0 2.445-.848 2.663-2.087l1.626-11.49.818.442c.364.193.82.06 1.017-.304.196-.363.06-.818-.304-1.016zm-4.638 12.133c-.107.606-.703.822-1.18.822H7.36c-.48 0-1.075-.216-1.178-.798L4.48 7.69 12 3.628l7.522 4.06-1.7 12.015z"></path> <path d="M8.22 12.184c0 2.084 1.695 3.78 3.78 3.78s3.78-1.696 3.78-3.78-1.695-3.78-3.78-3.78-3.78 1.696-3.78 3.78zm6.06 0c0 1.258-1.022 2.28-2.28 2.28s-2.28-1.022-2.28-2.28 1.022-2.28 2.28-2.28 2.28 1.022 2.28 2.28z"></path> </g> </svg> </a> </li> <li class="nav-item"> <a href="" class="nav-link"> <svg viewBox="0 0 24 24"> <g> <path d="M21 7.337h-3.93l.372-4.272c.036-.412-.27-.775-.682-.812-.417-.03-.776.27-.812.683l-.383 4.4h-6.32l.37-4.27c.037-.413-.27-.776-.68-.813-.42-.03-.777.27-.813.683l-.382 4.4H3.782c-.414 0-.75.337-.75.75s.336.75.75.75H7.61l-.55 6.327H3c-.414 0-.75.336-.75.75s.336.75.75.75h3.93l-.372 4.272c-.036.412.27.775.682.812l.066.003c.385 0 .712-.295.746-.686l.383-4.4h6.32l-.37 4.27c-.036.413.27.776.682.813l.066.003c.385 0 .712-.295.746-.686l.382-4.4h3.957c.413 0 .75-.337.75-.75s-.337-.75-.75-.75H16.39l.55-6.327H21c.414 0 .75-.336.75-.75s-.336-.75-.75-.75zm-6.115 7.826h-6.32l.55-6.326h6.32l-.55 6.326z"> </path> </g> </svg> </a> </li> <li class="nav-item"> <a href="" class="nav-link"> <svg viewBox="0 0 24 24"> <g> <path d="M21.697 16.468c-.02-.016-2.14-1.64-2.103-6.03.02-2.532-.812-4.782-2.347-6.335C15.872 2.71 14.01 1.94 12.005 1.93h-.013c-2.004.01-3.866.78-5.242 2.174-1.534 1.553-2.368 3.802-2.346 6.334.037 4.33-2.02 5.967-2.102 6.03-.26.193-.366.53-.265.838.102.308.39.515.712.515h4.92c.102 2.31 1.997 4.16 4.33 4.16s4.226-1.85 4.327-4.16h4.922c.322 0 .61-.206.71-.514.103-.307-.003-.645-.263-.838zM12 20.478c-1.505 0-2.73-1.177-2.828-2.658h5.656c-.1 1.48-1.323 2.66-2.828 2.66zM4.38 16.32c.74-1.132 1.548-3.028 1.524-5.896-.018-2.16.644-3.982 1.913-5.267C8.91 4.05 10.397 3.437 12 3.43c1.603.008 3.087.62 4.18 1.728 1.27 1.285 1.933 3.106 1.915 5.267-.024 2.868.785 4.765 1.525 5.896H4.38z"> </path> </g> </svg> </a> </li> <li class="nav-item"> <a href="" class="nav-link"> <svg viewBox="0 0 24 24"> <g> <path d="M19.25 3.018H4.75C3.233 3.018 2 4.252 2 5.77v12.495c0 1.518 1.233 2.753 2.75 2.753h14.5c1.517 0 2.75-1.235 2.75-2.753V5.77c0-1.518-1.233-2.752-2.75-2.752zm-14.5 1.5h14.5c.69 0 1.25.56 1.25 1.25v.714l-8.05 5.367c-.273.18-.626.182-.9-.002L3.5 6.482v-.714c0-.69.56-1.25 1.25-1.25zm14.5 14.998H4.75c-.69 0-1.25-.56-1.25-1.25V8.24l7.24 4.83c.383.256.822.384 1.26.384.44 0 .877-.128 1.26-.383l7.24-4.83v10.022c0 .69-.56 1.25-1.25 1.25z"> </path> </g> </svg> </a> </li> </ul> <form action="" class="form-inline w-100 d-none d-md-block ml-2"> <input type="text" class="form-control form-control-sm rounded-pill search border-0 px-3 w-100" placeholder="Search Twitter"> </form> <ul class="navbar-nav d-none d-md-block"> <li class="nav-item"> <a class="nav-link"><img src="https://vignette.wikia.nocookie.net/the-sun-vanished/images/5/5d/Twitter-avi-gender-balanced-figure.png/revision/latest?cb=20180713020754" alt="" class="img-fluid rounded-circle" style="height: 32px; width: 32px;"></a> </li> </ul> </div> </div> </nav>

body { background-color: rgb(230, 236, 240) !important; overflow-y: scroll; } nav.navbar > .container { max-width: 1000px !important; padding: 0px 10px !important; } ul.navbar-nav > li.nav-item > a.nav-link { width: 90px !important; height: 52.5px !important; line-height: 34.5px !important; text-align: center !important; border-bottom: 2px solid #fff; font-size: 15px !important; } ul.navbar-nav > li.active > a.nav-link { border-bottom-color: rgba(29,161,242,1.00); } ul.navbar-nav > li.nav-item > a.nav-link:hover { border-bottom-color: rgba(29,161,242,1.00); } ul.navbar-nav > li.nav-item > a.nav-link > svg { max-width: 100%; height: 1.640625rem; fill: rgb(101, 119, 134) !important; } ul.navbar-nav > li.active > a.nav-link > svg { max-width: 100%; height: 1.640625rem; fill: rgba(29,161,242,1.00) !important; } .search { background-color: rgba(101, 119, 134, 0.15) !important; border-radius: 50px; }

$(document).ready(function() { $("li.nav-item").click(function (e) { e.preventDefault(); $(".nav-item").removeClass("active"); $(this).addClass("active"); }); });