<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper"> <nav class="navbar navbar-default mq-nav"> <div class="mq-navbar-brand"> <a href="#" class="navbar-brand">Admin Panel </a> <a href="#" class="navbar-brand"><img src="https://image.flaticon.com/icons/png/512/52/52152.png" width="20" ></a> </div> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> </ul> </nav> <div class="mq-body"> <div class="col-md-4 mq-sidebar"> </div> <div class="col-md-8 mq-admin-body"> </div> </div> </div>

.mq-navbar-brand > a{ background-color:#2d2d2d; height:50px; color:#fff; display:inline-block; } .mq-navbar-brand > a:hover{ background-color:#2d2d2d !important; color:#fff !important; } .mq-nav{ margin:0px; border:0px; border-radius:0px; } .mq-sidebar{ background:#1c1c1c; position:absolute; width:200px; height:100%; margin:0px 10px 0px 0px !important; }