CODEWITHSUNDEEP
jquerycsstwitter-bootstrap-3
user3097331
user3097331

Reputation: 129

Off Canvas (Slide Over) Menu for Bootstrap 3

So I am trying to implement the off-canvas menu to my nav. I just can't quite figure this out with the code that is given at http://getbootstrap.com/examples/offcanvas/

When the screen's width is lower than 991px,the top links should come out in a vertical list when the menu (or hamburger) icon is clicked on. I would like that vertical list to slide over the content, so that the menu icon is somewhat still visible. So not a push effect.

A good example of what I'm describing is the "Slide In On Top" transition on this site http://tympanus.net/Development/SidebarTransitions/

Here is a bootply of my navbar. http://www.bootply.com/r8RRCqHo9J

Navigation

<header class="navbar navbar-inverse navbar-static-top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-responsive" src="http://placehold.it/234x84&text=LOGO" alt="..." style="padding:18px 5px"></a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-inverse">

<li class="active">
<a href="#">Home</a>
</li>

<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 1</a>
<ul class="dropdown-menu">
<li class="drop-down"><a href="#">Sub-Item 1</a></li>
<li class="drop-down"><a href="#">Sub-Item 2</a></li>
<li class="drop-down"><a href="#">Sub-Item 3</a></li>
<li class="drop-down"><a href="#">Sub-Item 4</a></li>
</ul>
</li>

<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 2</a>
<ul class="dropdown-menu">
<li class="drop-down"><a href="#">Sub-Item 1</a></li>
<li class="drop-down"><a href="#">Sub-Item 2</a></li>
</ul>
</li>

<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 3</a>
<ul class="dropdown-menu">
<li class="drop-down"><a href="#">Sub-Item 1</a></li>
<li class="drop-down"><a href="#">Sub-Item 2</a></li>
</ul>
</li>

<li>
<a href="#">Link 4</a>
</li>

<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 5</a>
<ul class="dropdown-menu">
<li class="drop-down"><a href="#">Sub-Item 1</a></li>
<li class="drop-down"><a href="#">Sub-Item 2</a></li>
<li class="drop-down"><a href="#">Sub-Item 3</a></li>
</ul>
</li>


</ul>
</nav>
</div>
</header>

Upvotes: 1

Views: 11049

Answers (1)

Leandro Carracedo
Leandro Carracedo

Reputation: 7345

You just have to navbar-static-top to navbar-fixed-top and add padding to body. Check this bootply: http://www.bootply.com/X2s18rcAdN

UPDATE:

The working solution: http://jsbin.com/yuxesupixu/1/edit?html,css,js

Based on the great work made by Christina: https://stackoverflow.com/a/20864689/1004312

Upvotes: 5

Related Questions