<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/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-fluid"> <div class="row nav-background "> <div class="col-lg-3 col-md-2 col-sm-12 text-center hidden-xs " style="margin-top:13px;"> <a class="nav-brand"> BLOGGER</a> </div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" /> <div class="col-lg-5 col-md-7 col-sm-12 text-center "> <div class="navbar navbar-default "> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="">Home</a></li> <li><a href="">Contact</a></li> <li><a href="">Android</a></li> <li><a href="">Java</a></li> <li class="dropdown"><a href="#" data-toggle="dropdown">Registration <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="">Sign In</a></li> <li><a href="">Sign Up</a></li> </ul> </li> </ul> </div> </div> </div> <div class="col-lg-4 col-md-3 col-sm-12 hidden-sm hidden-xs "> <div class="social text-right "> <a href="" class="text-gray"><i class="fab fa-facebook"></i></a> <a href="" class="text-gray"><i class="fab fa-instagram"></i></a> <a href="" class="text-gray"><i class="fab fa-twitter"></i></a> <a href="" class="text-gray"><i class="fab fa-youtube"></i></a> </div> </div> </div> </div>

.n avbar-default{ border:none; } .navbar-default .navbar-nav>li>a{ font-size:2rem; font-family:var(--Abel); color: black; } .navbar-default .navbar-nav>li>a:hover{ background-color:#104f55; color:white; } .nav-brand{ text-decoration: none; font-size:2.5rem; color:black; font-family: var(--Short); cursor: pointer; } .nav-brand:hover{ text-decoration:none; color:black; } .navbar{ margin-bottom: 0; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{ color:white; background-color:#49bbc6; } .social{ padding:1.4rem 0rem; } .social i{ padding:0 1rem; } .social>a>i{ font-size: 2rem; } .social i:hover{ color:var(--midnight); } .text-gray{ color:var(--text-gray); } .nav-background{ background: #f8f8f8; border-color:#e7e7e7; }