title: bootstrap responsive sidemenu
body: <p>I've been trying to get my site which has a sidemenu to override the normal functionality for the top menu when mobile view is operated.</p>
  
  <p>i.e. i want the menuitems to be full width.</p>
  
  <pre><code>&lt;div class="col-md3 pull-left"&gt;
              &lt;div class="bs-sidebar hidden-print affix-top" id="sidemenu"&gt;
                  &lt;ul class="nav bs-sidenav"&gt;
                      &lt;li class="nav-header"&gt;
                          &lt;a data-toggle="collapse" data-parent="#sidemenu" href="#Admincontainer" class=""&gt;&lt;span&gt;Admin&lt;/span&gt;&lt;i class=" pull-right glyphicon glyphicon-chevron-down"&gt;&lt;/i&gt;&lt;/a&gt;
  
  
                          &lt;ul style="list-style-type: none; margin-left:10px" id="Admincontainer" class="nav collapse "&gt;
  
                              &lt;li class=""&gt;
                                  &lt;a href="lnk" title=""&gt;
                                      Manage Members
                                      &lt;i class=" glyphicon glyphicon-chevron-right pull-right"&gt;
                                      &lt;/i&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="/Admin/Member/addnew" title=""&gt;
                                      Add A New Member
                                      &lt;i class=" glyphicon glyphicon-chevron-right pull-right"&gt;
                                      &lt;/i&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
  
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-header"&gt;
                          &lt;a data-toggle="collapse" data-parent="#sidemenu" href="#Publiccontainer" class=""&gt;&lt;span&gt;Committee&lt;/span&gt;&lt;i class=" pull-right glyphicon glyphicon-chevron-down"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;ul style="list-style-type: none; margin-left:10px" id="Publiccontainer" class="nav collapse "&gt;
                              &lt;li&gt;
                                  &lt;a href="/Public" title=""&gt;
                                      Home
                                      &lt;i class=" glyphicon glyphicon-chevron-right pull-right"&gt;
                                      &lt;/i&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="/Public/Contact" title=""&gt;
                                      Contact Us
                                      &lt;i class=" glyphicon glyphicon-chevron-right pull-right"&gt;
                                      &lt;/i&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I've tried and failed with a few approaches so ive created a "vanilla" template of how my menu looks before i try and "fix" it. I basically want the sidemenu to become that fullwidth top menu when the viewport becomes too small to accommodate both sidemenu and main content side by side.</p>
  
  <p>I've hacked an example from a default bootstrap template below.</p>
  
  <p><a href="http://jsbin.com/tusim/1/edit" rel="nofollow noreferrer">jsbin example</a></p>
  
  <p><strong>Default template</strong><img src="https://i.stack.imgur.com/oHZS4.png" alt="enter image description here"></p>
  
  <p><strong>Default template's in mobile with vertically stacked menu</strong><img src="https://i.stack.imgur.com/UiT4L.png" alt="enter image description here"></p>
  
  <p><strong>Example showing the sidemenu i want to replace the vertically stacked menu in previous image.</strong><img src="https://i.stack.imgur.com/YQ1xd.png" alt="sidemenu"></p>