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

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -