<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="navbar-header navbar-right toright"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <span class="navbar-brand white" style="margin-right: 20px;" href="#">چوونەژوورەوە</span> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-left mobileright"> <li> <a class="white" href="index">سەرەتا</a></li> </ul> </div> </nav>

.navbar-default { background-color:#5d7884; } .white { color:white !important; } .navbar-toggle { background-color:white; } nav li a { padding-top: 10px; padding-bottom: 10px; line-height: 20px; margin-left: 60px !important; } @media (max-width: 768px) { .navbar-brand { position: absolute; width: 100%; left: 0; text-align: center; margin:0 auto; } nav li a { padding-top: 10px; padding-bottom: 10px; line-height: 20px; margin-left: 0px !important; } .navbar-toggle { z-index:3; } .mobileright { text-align: center; } } @media (min-width: 768px) { .navbar-right { float: right !important; margin-right: 0px; } }