Collapsing WordPress sidebar at phone viewport — using Bootstrap 2


Collapsing WordPress sidebar at phone viewport — using Bootstrap 2

Avatar for Ben Kaminski  

September 10th, 2013

0 comments

This tutorial covers making the WordPress sidebar collapse into a mobile friendly navigation menu at the phone viewport only. As well as adding some conditional text that will only appear when the menu is at the phone viewport. You must be using Bootstrap 2 (*this will not work in BS3) in conjunction with WordPress for this tutorial to work.

The sidebar is a pretty standard feature of WordPress blog sites. I like them because they offer more real estate for more content. I am using one on this website currently. →

I was recently tasked by a client to make the WordPress sidebar collapse at the phone (mobile) level to a drop-down (Bootstrap) mobile nav menu. Essentially, a secondary mobile navigation menu to accompany the top menu yet keep it open at the tablet level. Did you get all that?

So, our main ingredients in pulling this off are some conditional CSS classes and the use of Bootstrap’s built in .navbar class. More specifically, .navbar-collapse class. If you are currently using the default Bootstrap top nav, essentially what we’re going to do here is use that same framework and apply it to the WordPress sidebar.

During this tutorial, I will be adding this same function to this website, so this will be my exact workflow… hopefully 🙂

Lets get started:

First things first, using the default top nav for Bootstrap is not completely necessary. You can follow this tutorial if you do NOT use the default top nav, you will just have to skip over the parts covering how to have two separate nav-collapse menus on the same page. You’ll get the gist of it though.

Applying this to your theme will depend on the theme’s architecture. I am working with a theme I created myself which is pretty bare bones. If you are working within a more complex theme, you will need some knowledge of the theme’s css to apply this. Your theme’s pages may have more or less code than mine do, but generally speaking — all WordPress code is the same from theme to theme so if you can navigate that, you’re in good shape.

Step 1
We’re going to add the same code structure that is used for the top navbar to the WordPress sidebar. Open your themes header.php and sidebar.php files in your favorite text editor.

Step 2
In your themes header.php simply copy the entire top navbar code. Mine looks like this:

As I stated before, your code may not be the exact same as mine but as long as you grab everything needed for your menu, you’ll be fine. You’re going to get rid of a lot of it anyway in the next few steps.

Step 3
Now go over to your sidebar.php file and paste the code at the bottom and comment it out as follows:

^^^ see how I commented the code out? We’re only going to apply certain elements of this to the sidebar so there’s no need for it all. Also notice how simple my sidebar code is. Chances are, your’s will be more filled with code unless your developing your own theme. But the only code that matters here is:

This is the function that calls the sidebar into action. The rest of the code you’ll see is probably just styling — BUUUUUTTT…we have to make some changes first otherwise we’re going to get some weird behavior out of the menus.

So, since there are two collapsing menus now (or there will be) we need to think ahead. We want to have control over BOTH menus so we will have to assign some unique ID’s to each, which is pretty simple. Let’s create some CSS:

I know what you’re thinking… you’re thinking: I understand the primary and secondary nav ID’s, but what’s with those classes “button-killer” and “mobile-menu”? Well, like I said before… we need to think ahead. I only want this to appear on mobile viewports (the mobile drop-down menu) and keep visible at tablet and desktop. The classes will be explained as we move along. Hint: they are the beginnings of some conditional hide and seek.

As far as the #primary-nav and #secondary-nav, they are how we will distinguish the two drop-down menus. I just chose “background: none;” as SOMETHING to associate with the ID’s. There is no real purpose for choosing that other than personal preference. I guess you could put like “margin: 0;” or something else simple.

Moving On

Your sidebar.php file should have the code from above commented out at the bottom if you’re following along. We’re going to assign these drop downs some specific ID’s… let’s do header first, find this line of code and replace .nav-collapse with #primary-nav as the “data-target”.

Replace with…

Once this change has been made, find the following code on the same “header.php” page:

And add the unique ID to the end of it:

See what we did there? Now you can save and close “header.php”. We’re done with that file for good. We have assigned a unique ID to the top navbar, now we have to set up and do the same for the WordPress sidebar.

So, go ahead over to your “sidebar.php” file. I’m going to show you my modified code. You will see elements of the commented out code used here. You should notice some some things are different.

You can now delete the commented out code. What I did here was take the commented out code at the bottom of the page and use it’s structure to build the second “sidebar” drop-down menu. In doing so, I added the #secondary-nav ID to the same areas as we did in the header. You will also notice the .mobile-menu and .button-killer classes being used here. So, before you save this page create the CSS necessary to utilize these classes properly. Here’s how, open your style.css file and add the following (or maybe you still have it open):

A few things to note here. We are using CSS3 media queries to conditionally show and hide the “Menu” text and drop-down “button” graphic. Notice how this iteration of .mobile-menu has many added attributes? That’s because it’s only to be seen at the mobile viewport level. Hidden everywhere else… including tablet. That’s where the #secondary-nav.collapse CSS comes in. The viewport media query between 768px and 980px is the defined “tablet” viewport. By default, BootStrap wants to collapse this menu at the tablet viewport. I personally think it should be shown. Without the overflow: visible and height: 100% attributes, this menu would be collapsed with a button for drop-down ability. Using the !important command, I was able to override BootStrap’s ability to auto-collapse at tablet viewport.

Save “sidebar.php” and “style.css”

Then re-load your page! Your sidebar should now be collapsing at the mobile viewport. Not to mention, you should see a title called “Menu” on the left, and your typical BootStrap drop-down button graphic on the right.

Depending on your theme, you may need to do some fine tuning to get the menu where you want it to appear. I wanted mine to appear above the content so I added the BootStrap class “pull-right” to my themes sidebar spans and placed them at the top of the page ABOVE the main content span. If you don’t know how to alter BootStrap spans break-down order, you’ll have to research that on your own. There are many tutorials available for that.

All in all, this tutorial looks much more complex than it actually is. We’re just re-using built-in BootStrap functionality and some conditional CSS. Also, you don’t have to use the same class names as I do. For the sake of this tutorial, I made the classes as self-explanatory as possible.

Hopefully this tutorial worked for you and I look forward to your comments and questions.



Leave a Comment Below...

Your email address will not be published.

Related: , , , , , , , , , , , , ,

Footer Meta:


Copyright © 2009 - 2017 benkaminski.com