css - Bootstrap 3 Space between navbar-brand and navbar ending -
css - Bootstrap 3 Space between navbar-brand and navbar ending -
i have issue bootstrap 3. don't know why, in mobile screen there space between navbar-brand , navigation bar ending. guess, because of navigation bar glyphicon doesn't fit navigation bar. how can solve issue? need remove empty space...
desktop-size version:
mobile-size version:
html:
<header class="top" role="header"> <div class="container"> <a href="../aplikacija/app.html" class="navbar-brand pull-left"> brand </a> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="glyphicon glyphicon-align-justify"></span> </button> <nav class="navbar-collapse collapse" role="navigation"> <ul class="navbar-nav nav"> <li><a href="#">page 1</a></li> <li><a href="#">page 2</a></li> </ul> </nav> </div> </header>
css:
div.container { background-color: #474747; display: block; width: 80%; height: auto; margin-left: auto; margin-right: auto; padding-left: 0px; } a.navbar-brand { text-shadow: none; background-color: #ccc; color: #474747; margin-left: 0px; } ul.navbar-nav li a{ text-shadow: none; color: #ccc; } ul.navbar-nav li a:hover { background-color: #373737; color: #ccc } button.navbar-toggle { color: #ffffff; } span.glyphicon { color: #009b9b; }
you can remove space removing margin-bottom
.navbar-toggle
:
button.navbar-toggle { color: #ffffff; margin-bottom: 0px !important; }
!important
optional, can't tell right if need this, test it.
css html5 twitter-bootstrap twitter-bootstrap-3
Comments
Post a Comment