html - How can I change bootstrap menu width? -
how can change bootstrap menu width without affecting responsiveness? below html:
<div class="page-header col-xs-12"> <h2>heading</h2> </div> <div class="container col-xs-12"> <div class="row navigation-row"> <div class="col-xs-2"></div> <div class="col-xs-8"> <nav class="navbar navbar-default" style="background:none;border:0px;"> <div class="container-fluid"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">page 1 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">page 1-1</a></li> <li><a href="#">page 1-2</a></li> <li><a href="#">page 1-3</a></li> </ul> </li> <li><a href="#">page 2</a></li> <li><a href="#">page 3</a></li> </ul> </div> </nav> </div> <div class="col-xs-2"></div> </div> </div>
following css:
@charset "utf-8"; .page-header { background-color:#ddefe6 !important; height:150px; margin:0px auto; } .navigation-row{ background-color:#009547; padding:0px; height:50px; }
how can change width of 'home' menu?
you try increasing padding between navbar elements display futher apart , thus, appear have large width using following css:
.navbar-nav > li { padding-left: 30px; padding-right: 30px; }
adjust wish.
Comments
Post a Comment