1

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>
user3097331
  • 129
  • 1
  • 2
  • 14
  • 1
    Do you mean like this> This navbar-fixed will overlay the page content when it's collapsed http://bootply.com/sNp1bzAbR9 – Carol Skelly Dec 04 '14 at 18:11
  • @Skelly I mean the menu should reveal itself from the left side of the screen. Sorry if that was confusing! – user3097331 Dec 04 '14 at 18:29
  • 1
    http://stackoverflow.com/a/20864689/1004312 – Christina Dec 04 '14 at 19:06
  • Hi @christina thanks for this. However I mean something along the lines of the "Slide In On Top" transition on this page http://tympanus.net/Development/SidebarTransitions/ It seems I might not be clarifying myself that well! Sorry! – user3097331 Dec 04 '14 at 19:21

1 Answers1

4

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

Community
  • 1
  • 1
Leandro Carracedo
  • 7,233
  • 2
  • 44
  • 50
  • Hi @patrick-lc I meant that the menu should slide over the content on the right side. And the menu being a vertical list. – user3097331 Dec 04 '14 at 18:31
  • the examples are like what I'm explaining but instead of sliding the content over, the menu actually appears over the content, with a light, gray overlay on the remaining content that isn't under the menu. – user3097331 Dec 04 '14 at 19:02
  • 2
    Love how wsnippets uses my custom code, from my answer http://stackoverflow.com/a/20864689/1004312 and doesn't mention the source. Dicks. – Christina Dec 04 '14 at 19:04
  • @Christina it's not possible for me to edit my own comment, so I removed it since they clearly uses your code, shame on them! – Leandro Carracedo Dec 04 '14 at 19:16
  • 1
    based on the work of @Christina: you are talking about something like this http://jsbin.com/yuxesupixu/1/edit?html,css,js – Leandro Carracedo Dec 04 '14 at 19:51
  • Nice! Please update your answer, when you get a chance, so I can save it for later. – Christina Dec 04 '14 at 20:27
  • 1
    Answer updated, you should upvote @Christina answer too. – Leandro Carracedo Dec 04 '14 at 20:49