title: How can I change bootstrap menu width?
body: <p>How can I change bootstrap menu width without affecting responsiveness? Below is my html:</p>
  
  <pre><code>&lt;div class="page-header col-xs-12"&gt;
          &lt;h2&gt;Heading&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="container col-xs-12"&gt;
          &lt;div class="row navigation-row"&gt;
              &lt;div class="col-xs-2"&gt;&lt;/div&gt;
              &lt;div class="col-xs-8"&gt;
                  &lt;nav class="navbar navbar-default" style="background:none;border:0px;"&gt;
                      &lt;div class="container-fluid"&gt;
                          &lt;ul class="nav navbar-nav"&gt;
                              &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="dropdown"&gt;
                                  &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Page 1
                                      &lt;span class="caret"&gt;&lt;/span&gt;
                                  &lt;/a&gt;
                                  &lt;ul class="dropdown-menu"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Page 1-1&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Page 1-2&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Page 1-3&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-2"&gt;&lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Following is my css:</p>
  
  <pre><code>@charset "utf-8";
  
      .page-header {
          background-color:#DDEFE6 !important;
          height:150px;
          margin:0px auto;
      }
      .navigation-row{
          background-color:#009547;
          padding:0px;
          height:50px;
      }
  </code></pre>
  
  <p>How can I change width of 'Home' menu?</p>