<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="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand visible-xs"> <img width="20" height="20" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAA81BMVEX///9VPnxWPXxWPXxWPXxWPXxWPXxWPXz///9hSYT6+vuFc6BXPn37+vz8+/z9/f2LeqWMe6aOfqiTg6uXiK5bQ4BZQX9iS4VdRYFdRYJfSINuWI5vWY9xXJF0YJR3Y5Z4ZZd5ZZd6Z5h9apq0qcW1qsW1q8a6sMqpnLyrn76tocCvpMGwpMJoUoprVYxeRoJjS4abjLGilLemmbrDutDFvdLPx9nX0eDa1OLb1uPd1+Td2OXe2eXh3Ofj3+nk4Orl4evp5u7u7PLv7fPx7/T08vb08/f19Pf29Pj39vn6+fuEcZ9YP35aQn/8/P1ZQH5fR4PINAOdAAAAB3RSTlMAIWWOw/P002ipnAAAAPhJREFUeF6NldWOhEAUBRvtRsfdfd3d3e3/v2ZPmGSWZNPDqScqqaSBSy4CGJbtSi2ubRkiwXRkBo6ZdJIApeEwoWMIS1JYwuZCW7hc6ApJkgrr+T/eW1V9uKXS5I5GXAjW2VAV9KFfSfgJpk+w4yXhwoqwl5AIGwp4RPgdK3XNHD2ETYiwe6nUa18f5jYSxle4vulw7/EtoCdzvqkPv3bn7M0eYbc7xFPXzqCrRCgH0Hsm/IjgTSb04W0i7EGjz+xw+wR6oZ1MnJ9TWrtToEx+4QfcZJ5X6tnhw+nhvqebdVhZUJX/oFcKvaTotUcvUnY188ue/n38AunzPPE8yg7bAAAAAElFTkSuQmCC" alt="Brand"> </a> <a href="#" class="navbar-brand hidden-xs">My Portal</a> </div> <div class="navbar-collapse collapse" id="navbar"> <ul class="navbar-right nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-fw fa-bell-o"></i> Bildirimler <span class="badge">0</span></a> <ul class="dropdown-menu" role="menu"> <li class="dropdown-header">No message.</li> </ul> </li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" class="navbar-link">Menu<span class="caret"></span></a> <ul role="menu" class="dropdown-menu"> <li class="active"><a class="animate" href="#">Home</a></li> <li class="dropdown-header">General</li> <li><a class="animate" href="#">Users</a></li> <li><a class="animate" href="#">Widget</a></li> <li role="separator" class="divider"></li> <li class="dropdown-header">User Settings</li> <li><a class="animate" href="#">Change password</a></li> </ul> </li> </ul> </div> </div> </div> <div class="container-fluid content">ipso dupso lerentum </div>

.content { padding-top: 70px; } .navbar-blue .navbar-nav > li.active:not(.disabled) > a,.navbar-blue .navbar-nav > li.open:not(.disabled) > a,.navbar-blue .navbar-nav > li:not(.disabled) > a:focus,.navbar-blue .navbar-nav > li:not(.disabled) > a:hover { color:white; background-color:#1E5FE0; } .navbar-blue .navbar-nav > li.active:not(.disabled) > a,.navbar-blue .navbar-nav > li.open:not(.disabled) > a,.navbar-blue .navbar-nav > li:not(.disabled) > a:focus,.navbar-blue .navbar-nav > li:not(.disabled) > a:hover { border-left-width: 5px; color: white; padding-left: 10px; } .navbar-blue { background-color: blue; border-color: white; border-radius: 0; margin-bottom: 0; z-index: 100; } .navbar-blue .navbar-brand { color:white; } .navbar-blue .navbar-brand:hover { color:white; } .navbar-blue .navbar-link { color:white }