Build Your Own Business Website header image

BYOB Simple Responsive Menu for Thesis 2

The BYOB Thesis Simple Responsive Menu creates a drop down menu on mobile devices with small screens. This is especially suitable for menus that have submenus including multiple layers of submenus.

The menu comes in 2 parts, a box to select and place the menu and a package to style it.  It can be used on any skin that has media queries built into the CSS. The menu comes with a default style, but can be completely customized similar to the standard Horizontal Drop Down Menu package.

To install the menu, install the box on your site using the Upload Box button on the Thesis 2 Select Boxes page.  Place a check mark beside the box and hit “Save Boxes”.  This activates the box. Then install the package using the similar system for packages. Once both are activated a box will become available in the HTML section of the skin editor and a package will be available in the CSS section.

Members can download the box and the package from the links below. Make sure to download and install both.

  • Latest box version – 1.0.1
  • Latest package version – 1.0.0

To download this box you must be a Premium Member.

Why not join today? Click on the "Join Us!" button in the upper right corner and have full access to this and all the rest of our premium content.

To download this package you must be a Premium Member.

Why not join today? Click on the "Join Us!" button in the upper right corner and have full access to this and all the rest of our premium content.

Video Transcript

Today I’m going to demonstrate a new resource for making your Thesis 2 site responsive that I’ve created, called the BYOB Simple Responsive Menu for Thesis 2. Now this is actually made up of a combination of both a box and a package and so you have to install and configure both of those in order for this thing to work.

But here we are on the menu page, now if we scroll down here towards the bottom you can see there’s a “download the box” and a “download a package”. So what I’m going to do is right click on the box and say “Save link as” and save the box. And then right click on the package and say “Save link as”, the difference between a box name and a package name is that the package name has “style” after it. Okay, so save that.

Now that we have both of those things saved, we’re going to install them on our site. And this site here is the site that I’m working on and I have the three-column responsive version of Thesis Classic installed here. So here on the Thesis Menu, I’m going to first install my box, well I’ll go to “Select boxes”. First we have to upload this box, so we select “Upload box”, choose our file and then go down and grab the file, add the box… it’s unpacking it and it tells you the box is successfully installed.

Now all we have to do is come down and put a checkmark in the box, save the boxes and then come on over and do the same thing to packages. We’ll select our packages, we’re going to upload a new package, choose the package, again it’s the file. Add the package. So as the package was successfully installed, put a checkmark beside it and hit save packages, and now we can come over to our skins.

So we’ll go ahead and go to the “Skin editor”. Now this how the normal WordPress menu looks like in the responsive skin. and if we take a look at it in the responsinator over here, you can see it looks just fine except when you hover over something with drop down menu. So that’s what this new menu system is going to fix. It’s going to eliminate this problem with the drop down menus that don’t show up well.

So we’d come back over to our“Skin editor” and what those two things have done are, we’ve added a box to our “Add Boxes” menu which is the BYOB Simple Responsive Nav Menu box. And we’ve added a corresponding package, under “Select package to add” now we have a “BYOB Simple Responsive Menu Style” package, so we’re going to add both of those. We’ll start off with the box. Come down here, add the box, pick this “BYOB Simple Responsive Nave Menu”. We’re going to call it main menu. Go ahead and add that box and then I’m just going to shift drag it up into the container up here and then shift drag the original nav menu out, drop it there.

I’m going to come over and open up the options, we’re going to show the main menu so I picked the menu that we want and then let’s give it a class. Now we don’t want to give it the same class as the standard menu because we don’t want a mix and match kind of menu style. So we’ll go ahead and call it main menu and save that template. Come over and look at the template you can see that now the menu is in the unordered list, and that’s because we haven’t added a new style to it yet. So we come on over to the CSS section now and we will create a package and we’ll create a BYOB Simple Responsive Menu Style package, add the package. The selector here will be the same as the class so it’s “_main_menu”. We’ll give that the same reference as “main_menu” and in fact, we’ll give it the same name, “Main Menu” and then at the moment we’re just going to hit save and then come down here and add that menu to our list.

Now if we look at our canvass, we have this little menu, what’s going to be a menu button and then each of our menu items here in a row. So obviously, we’ve got to do some more styling to this yet but if we save this CSS and come over and take a look at it in the responsinator, we’re going to see we’ve created this nice little drop down menu here so that all of these different menu items can be seen and then we can close it up and you can scroll through your page without having the menu on the way and then when you want to see the menu, you just open it back up again and you can choose any one of these things.

So this is actually the default style of this menu, and we can change this default style by making changes to that CSS package. So if we come back over to the “Skin editor” and we come down to our main menu and we go to our “Options”. We’ll look at our “Font Settings” and let’s say we want it Arial and the font size should be 16 pixels and everything else we can leave the same. The link settings, let’s give the text color a color of white. And the background color a color of dark blue. And then our “Hovered links”, the hovered link color will still stay white but our hovered link color will become a lighter version of that blue, in fact let’s just drag it over a little bit more. And then the “Current link”, we’re going to make the text color, blue but we’ll make the background color, white. And the “Current parent links” we’ll make the text color, white. And we’ll make the background color, yellow.

And then under “Menu Item Padding”, we’ll go ahead and say 10 pixels all the way around. And our “Border Settings” will have none, we’ll go ahead and save this. Take a look at it, so we don’t have any borders around this, just a nice, clean menu. And if we come on over, back over here and save it and refresh it, now we have this nice color of blue. And with these colors changing as we scroll down and if we click on to one of those, it takes us back over to a page with a regular menu on it. Once you can see how much better this menu looks than the old menu.

Now this menu also works for multiple drop down depths so for example, if we came back over to the site and we change up this menu for a second and go to Appearance and Menu and add a third and fourth level of drop down, save that menu. Come back over here and refresh it and then you can see that “Rick’s Favorite WordPress Books” was indented again and the “Sample Page” was indented again so this gives you an opportunity to have fairly extensive menus which is not easily done with other menu systems. Okay, I hope you enjoy, I hope it works well for you.