Sidebar Menu like Off Canvas

Hey all,

has anybody managed to implement a vertical sidebar menu (not primary navigation) as in Bootstraps Off Canvas template: Bootstrap 3 Off Canvas Template?


You’ll need to create a new nav walker (you can see an example in Roots in lib/nav.php) that uses that markup.

thanks Ben,

so basically I’d duplicate the nav walker and give it another name, such as Roots_Sidebar_Nav_Walker?

Just had a closer look at the Off-Canvas concept. It’s nice, but actually I was just looking for a way to have an “out-of-the-box nice looking” sidebar menu like the one in the roots gallery: roots gallery

But that’s just a link list, is it? I’ve tried the Individual Menu Widget, but that just gives an unformated list.

Did you get to do it?

More or less the same:
I want a similar navigation as wordpress dashboard or smashing mag have, I mean:

  • A vertical menu wich is allways 100% height
  • It collapses on resizing and it slides from left clicking toggle

I´ve been stucked with this for days and I´ve followed a the tutorials I´ve found and nothing solid comes out, its possible obviously but i can´t get it working. I see roots gallery has the same I want but I want to make the menu keep vertical and slide from the left pushing the content…

Any Idea?

Sorry for responding late. Actually I had not fully understood the Off Canvas concept, when I posted this. I was looking for a secondary sidebar menu. What I did was setting up an additional menu, used it with the custom-menu widget for sidebars (default) and looked up the CSS in the Bootstrap documentation and applied them to it respectively.

As for what you are looking for - no idea other than going through the CSS and .js of the Off-Canvas template in Bootstrap and/or try again with the tutorials. Debugging is tedious work… :frowning:

I imagine this has been done already and better than my offering, but in case it’s of use to anyone:

Here’s a fork of bootstrap-nav-walker that implements a fairly nice Bootstrap Drawer.

It only works to one level of indentation as of this writing. Suggestions and other useful input welcome, as always.

1 Like

Been using Materialize for this with something like this:

		    <nav id="site-navigation" class="main-navigation nav-primary navbar-default" role="navigation">
    			<a href="#" data-activates="mobile-nav" class="button-collapse">Menu</a>
    			<?php wp_nav_menu( array(
    			'menu'              => 'primary',
    			'theme_location' => 'primary_navigation',
    			'menu_class' => 'menu side-nav',
    			'menu_id' => 'mobile-nav',
    			'items_wrap' => '<ul id="%1$s" class="%2$s"><li class="mobile-header"><p>Menu</p></li>%3$s</ul><div class="clear"></div>',
    			) ); ?>
    			<?php wp_nav_menu( array( 'theme_location' => 'primary_navigation', 'menu_class' => 'hide-on-med-and-down right' ) ); ?>

Cool. Materialize looks great. I still have so much to learn about Bootstrap. A good deal behind the curve here. Thanks.

Bit silly though that you have to duplicate the navigation ul markup:
To use this in conjunction with a fullscreen navigation, you have to use two copies of the same UL.

This is the same principle as the bootstrap nav walker and most other mobile menus. When I first saw it, I thought it looked like ‘wet’ code too, but the above is the simplest method I’m aware of for WP (and doesn’t actually duplicate the UL in the way shown in that Materialize example). Having said that, addressing the original question, it is easy to do a full height column in CSS with flex box, so maybe there’s an even more straightforward pure CSS solution now?

1 Like