<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="topnav"> <!-- <a href="#camera"><span class="glyphicon glyphicon-camera"></span></a> --> <a class="active" href="#chat">Chats</a> <a href="#Status">Status</a> <a href="#calls">Calls</a> </div>

.topnav { overflow: hidden; background-color: #075e55; } .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 7px 16px; text-decoration: none; font-size: 17px; font-weight: bold; margin-bottom: 5px; } .topnav a:hover, .topnav a:focus { background-color: #075e55; color: white; border-bottom: 3px solid #fff; } .active{ border-bottom: 3px solid #fff; }