title: navbar slide from side instead of bottom in mobile view
body: <p>Is it possible to have the navbar slide from the right side instead of bottom in mobile view. I am using the default bootstarp nav bar and I have customized the color. Similarly if I have sub-menu's will it work the same way (sliding from right to left). Please help.</p>
  
  <p>html code:
      
                                              Menu
                                              
                                              
                                              
                                          </p>
  
  <pre><code>&lt;div class="navi_links col-xs-12 col-sm-7 col-md-7 col-lg-7"&gt;
                            &lt;!-- nav bar main links ---&gt;
                             &lt;div class="collapse navbar-collapse main-menu" id="bs-example-navbar-collapse-1"&gt;
                                 &lt;ul class="nav navbar-nav"&gt;
                                     &lt;!--- link 1 and sub nagigation ---&gt;
                                      &lt;li class="dropdown"&gt;
                                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;PRODUCTS &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                                          &lt;ul class="dropdown-menu main-menu-sub"&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Unit Coolers&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Condensing Units&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Condensers &amp;amp; Fluid Coolers&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Systems&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Others&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Check Inventory&lt;/a&gt;&lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
  
                                      &lt;!--- link 1 and sub nagigation ---&gt;
                                      &lt;li class="dropdown"&gt;
                                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Projects &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                                          &lt;ul class="dropdown-menu main-menu-sub"&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Create A Project&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;My Project&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;My Address Book&lt;/a&gt;&lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
  
                                      &lt;!--- link 1 and sub nagigation ---&gt;
                                      &lt;li class="dropdown"&gt;
                                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Orders &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                                          &lt;ul class="dropdown-menu main-menu-sub"&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Create A Order&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;My Orders&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Shipping Details&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Invoices&lt;/a&gt;&lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
  
                                      &lt;!--- link 1 and sub nagigation ---&gt;
                                      &lt;li class="dropdown"&gt;
                                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Tools &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                                          &lt;ul class="dropdown-menu main-menu-sub"&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Quick Submittal Drawings&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Quick Box Load Calculator&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Detailed Box Load Calculator&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Quick Energy Calculators&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Parts Lookup&lt;/a&gt;&lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
  
                                      &lt;!--- link 1 and sub nagigation ---&gt;
                                      &lt;li class="dropdown"&gt;
                                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Resources &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                                          &lt;ul class="dropdown-menu main-menu-sub"&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Literature&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;My Programs&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Training&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Contractor Network&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Co-op Advertising&lt;/a&gt;&lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
  
                                      &lt;!--- link 1 and sub nagigation ---&gt;
                                      &lt;li class="dropdown"&gt;
                                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Support &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                                          &lt;ul class="dropdown-menu main-menu-sub"&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Customer Service&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Technical Support&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Warrant&lt;/a&gt;&lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
  
                                    &lt;/ul&gt;
                            &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
                         &lt;/div&gt;
  </code></pre>