Bootstrap layout with sidebar offcanvas toggle and custom design

This is a bootstrap layout question which not yet relates to Roots since I first want to make sure I got the right layout and design.

I’ve used the Bootstrap Offcanvas Sidebar Template as a starting point for a layout and fiddled with it til I’ve gotten it mostly as I intend for my design. Somewhere along my customisation I’ve lost my ways, or maybe rather misintrepeted some of the Bootstrap framework, since I’m still a rookie.

For you to see the code I’ve preparred a one page version on JSFiddle of the code as of now, which has the same looks and the same behavior (both the correct and faulty) as my own development code. Here it is.

However, there’s a couple of things I want to achive with my layout:

  • Responsiveness, not only the default Bootstrap way, but also a semi-adaptive design for small screens (xs aka smartphones) where a top navbar menu is pushed (or as of now hidden and exchanged) to a bottom navbar in the footer. Then the page title should take its former place centered in the top navbar. This is almost like I want it to, but still not quite, as the navbar menu when shown in the bottom navbar can’t be aligned horizontally, but as per Bootstrap default stacks vertically. Also the page title won’t come centered.

  • A sidebar page menu that goes offcanvas on small screens with an toggle button appearing. This works as intended, only that I can’t seem to get padding and sizing for all breakpoints to get a smooth responsivness and correct behaviour.

  • A couple of buttons (buttongroup for now) which should always align to the right. As of now they only do this on small screens.

Hopefully some of you who are more experienced than me can tell me why it doesn’t look and behave as per my intension.


I’m just working on a same thing.
Works nice with me.
If you still have this issue, here is my solution:

  1. Download css and js for offcanvas

  2. Modified base.php

Important thing is to add classes: row-offcanvas row-offcanvas-left to your content div, and then inside same div add your menu like:

<nav class="col-sm-2 sidebar-offcanvas" role="navigation">
       if (has_nav_menu('primary_navigation')) :
          wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav navbar-nav'));

I’m using same menu as in navbar.

  1. Modify toggle button
    I’m using top-navbar, so my modified navbar file looks like:

What you have to make sure here is that button that should toggle navigation has: data-toggle="offcanvas"

In my case this looks like:

<button type="button" class="navbar-toggle" data-toggle="offcanvas">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>

Hope this helps.