Add an Off-canvas sidebar menu to a WordPress theme

Posted in RESOURCES by Topher

I recently made some long overdue updates and changes to this website. Most importantly I wanted to make sure that it was responsive so people could enjoy the content on any device. I have been meaning to get around to doing this for almost two years and just could not find the free time. Finally I forced myself to take a bit of time to bring it up to date and I’m very pleased with the result.

After I had the site up-to-date with a responsive layout, the next step was to create a simple navigation structor that did not get in the way of the content (cause a visual distraction). My goal here was to declutter and make the site structor as minimal as possible. So to this end decided I wanted to create a off-canvas menu. Luckily I had just recently been looking at a great example of exactly the kind of menu I was looking for on the website: Codrops .

As you can see this is a great demo/tutorial for building a off-canvas sidebar. It comes pre packed with 14 unique transition effects to choose from.

So the only thing I had left to do was to incorporate this transition effect into my WordPress theme. So quickly lets walk threw this process:

1. Download the source code. Extract it to your desktop and view the contents in your favourite text editor (mine’s Sublime Text).

2. Copy and Paste this css into your style.css file:

/*-[ Sidebar Transition ]--------------------*/
html,
body,
.st-container,
.st-pusher,
.st-content {
	height: 100%;
}

.st-content {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	background-color:white;
	background: url(images/header-img-trans-whiter.png) top center no-repeat;
}

.st-content,
.st-content-inner {
	position: relative;
}

.st-container {
	position: relative;
	overflow: hidden;
}

.st-pusher {
	position: relative;
	left: 0;
	z-index: 99;
	height: 100%;
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.st-pusher::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	background: rgba(0,0,0,0.2);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
	transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

.st-menu-open .st-pusher::after {
	width: 100%;
	height: 100%;
	opacity: 1;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.st-menu {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	visibility: hidden;
	width: 300px;
	height: 100%;
	background: #48a770;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.st-menu::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	content: '';
	opacity: 1;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.st-menu-open .st-menu::after {
	width: 0;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
	transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
#st-trigger-effects button {
	border: none;
	padding: 0.6em 1.2em;
	background: #388a5a;
	color: #fff;
	font-family: 'Lato', Calibri, Arial, sans-serif;
	font-size: 1em;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	display: block;
	/* margin: 3px 2px; */
	border-radius: 2px;
	margin: 0 auto;
}

#st-trigger-effects button:hover {
	background: #2c774b;
}

3. You’ll want to add the javascript files to your theme directory (ie theme_dir/js/classie.js and theme_dir/js/sidebarEffects.js). Next you’ll need to link to these new files in the footer.php file off your theme. Add the links just above the closing <body> tag :

<script src="<?php echo get_template_directory_uri(); ?>/js/classie.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/sidebarEffects.js"></script>
</body>
</html>

4. Next we need to add the new content wrappers right under the opening <body> tag:

<div id="st-container" class="st-container">

    <!-- content push wrapper -->
    <div class="st-pusher">

        <nav class="st-menu st-effect-1" id="menu-1">
            <!-- sidebar content -->
        </nav>

        <div class="st-content"><!-- this is the wrapper for the content -->
            <div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->

Close these divs in the footer.php template file:

            </div><!-- /st-content-inner -->
        </div><!-- /st-content -->

    </div><!-- /st-pusher -->

</div><!-- /st-container -->
<script src="<?php echo get_template_directory_uri(); ?>/js/classie.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/sidebarEffects.js"></script>
</body>
</html>

5. Move the Primary (or secondary) navigation <nav> into the new off-canvas sidebar (). To do this open your header.php file and cut and paste the primary nav (for this example I will use the code from the default twentyfourteen theme as I imagine everyone will be able to follow along this way):

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
    <h1 class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
    <a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

6. Make sure to remove the class tags from the nav element and replace them:
Remove:

class="site-navigation primary-navigation"

and replace with:

class="st-menu st-effect-3" id="menu-3"

(st-effect-3 and menu-3 are for the PUSH transition effect. Read and follow the directions from the Codrops source code to find the effect you want depending on whether you want the sidebar to be on top of the push wrapper or under it)

7. Now we will need to activate this effect and show the new off-canvas sidebar with a button. So lets add a button just before the <div> tag with the class=st-content:

</nav>
<div id="st-trigger-effects"><button data-effect="st-effect-3">Menu</button></div>
<div class="st-content"><!-- this is the wrapper for the content -->

So that should do it and you should now have a working example!

There was however a couple things I had to add to make the effect a bit more responsive and mobile friendly:

8. The first problem I came across was the smooth scrolling effect (or lack there of) on a iPad, iPhone or other mobile devices. To solve this problem all we have to do is add -webkit-overflow-scrolling: touch; to the .st-content class:

.st-content {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	background-color:white;
}

9. The final thing I would suggest is to add a scrollbar to the new sidebar for small devices. What I noticed was that the sidebar menu was getting cut-off on the bottom of the screen on my iPhone and you could not scroll down to view it. For this next step you will probably want to be utilizing media queries as we only want this effect on device with a smaller width then 400px. To solve this problem we just need to add the scroll effect to the .st-menu class:

@media screen and (max-width:400px){
.st-menu {overflow-y: scroll; -webkit-overflow-scrolling: touch;}
}

There we’ve now hopefully covered everything you will need to make a off-canvas sidebar menu work with your WordPress site. If you run into problems be sure to let me know and I’ll see if I can help. Also if you do end up using this effect please add a link to your site in the comments, so we can take a look!

About Author

I'm the curator here at designshifts.com as well as being a web developer by day. I have a passion for design and love to share inspiration and tips and tricks with the community.

Design Shifts

Add an Off-canvas sidebar menu to a WordPress theme

About Author

ADD YOUR COMMENT

Related Posts

About Author

ADD YOUR COMMENT