Is there a way for the navbar to slide in from the right side on mobile view instead of the bottom? I am currently using the default Bootstrap navbar and have customized the color. Additionally, if I have sub-menus, will they also slide in from right to left? Any assistance would be appreciated.
HTML Code: Menu
<div class="navi_links col-xs-12 col-sm-7 col-md-7 col-lg-7">
<!-- nav bar main links --->
<div class="collapse navbar-collapse main-menu" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PRODUCTS <span class="caret"></span></a>
<ul class="dropdown-menu main-menu-sub">
<li><a href="#">Unit Coolers</a></li>
<li><a href="#">Condensing Units</a></li>
<li><a href="#">Condensers & Fluid Coolers</a></li>
<li><a href="#">Systems</a></li>
<li><a href="#">Others</a></li>
<li><a href="#">Check Inventory</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Projects <span class="caret"></span></a>
<ul class="dropdown-menu main-menu-sub">
<li><a href="#">Create A Project</a></li>
<li><a href="#">My Project</a></li>
<li><a href="#">My Address Book</a></li>
</ul>
</li>
// More menu items...
</ul>
</div><!-- /.navbar-collapse -->
</div>