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:
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 -->
<nav class="st-menu st-effect-1" id="menu-1">
<!-- sidebar content -->
<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 -->
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):