Build Your Own Business Website header image

BYOB FlexNav Responsive Menu for Thesis 2

The BYOB FlexNav Responsive Menu for Thesis 2 creates a drop down menu on mobile devices with small screens. This menu is based on the flex nav menu system developed by Jason Weaver. This is suitable for menus that have no submenus or only a single level of drop down submenu.

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 the colors and fonts can be 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.

Please note: In order for the menu to display properly it will be necessary for you to select the number of top level menu items in your menu. You can do that from the BYOB FlexNav Responsive Menu Style package.

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

  • Latest box version – 1.0.2
  • Latest package version – 1.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 give a brief demonstration of the new menu I’ve created for Thesis 2 called the BYOB Flex Nav Responsive Menu. Now this menu adds both a package and a box to your Thesis 2 site and it takes a horizontal navigation menu and turns it into a vertical navigation menu on a smaller screen. And so we’re going to come over here and take a look at this site, and this is the site that we’re going to change the menu for. This is the standard Thesis menu that I’ve converted to being responsive inside of this Thesis responsive skin modification and it works just fine except that if you have drop down menu elements, at that point it begins to fail.

This is what it looks like in the responsinator and it looks fine here until you have drop down elements. So what we’re going to do is we’re going to create a menu that automatically, that takes this menu like this and turns into a stacking menu and then expands and contracts for the submenu items. Now this is really only good for menus with one level of drop down menu so if you’ve got multiple levels of drop downs then you should probably plan on using the Simple Responsive Menu instead.

Anyway, we’re going to go ahead and download this here. This is the Flex Nav Responsive Menu for Thesis 2 page and we’ve got both a box and a package to download so we’ll go ahead and right click on the box and then “Save Link As” and we’ll go ahead and save that. And then the package has the same name as the box does except that I’ve put the word “style” after so it’s byob-flexnav-responsive-menu.zip and byob-flexnav-responsive-menu-style.zip. Download both of those.

Now we come on over to our site and we’ll come over to Thesis and we start it off here in “Boxes” and then “Select Boxes” and “Upload a Box” and then choose the file, and then we want to upload the box of course, not the package which in this case is the byob-flexnav-responsive-menu.zip so we open that up, add the box, when that’s completed we’ll get a little message the box was successfully installed. Go ahead and close that. We need to go down and find the box, put a checkmark in the box beside the it and hit “Save Boxes”. That activates the box.

Then we’re going to do exactly the same thing for packages, we’d come over here and select “Packages” and we “Upload a Package”, choose the file. Again clicking the style version so it’s the byob-flexnav-responsive-menu-style.zip, open that. Add the package. The package was successfully installed so we close the window, put a checkmark there, hit “Save package” and now both the box and the package have been installed.

Now if we come back over to our “Skin editor” now, you’ll see proof that it has been installed in the HTML editor, scroll down here to “Add Boxes”. Here’s the BYOB Flex Nav Responsive Menu as a box choice for you. And if we come over to the CSS editor and select “Packages”, the BYOB Flex Nav Responsive Menu Style is also available. Now we have to install both of those and we have to edit both of those in order for this menu to work.

The first thing that we’re going to do is install the HTML box. So essentially what we do is we add the box, we go down here and select it. And we’re going to call it “Main Menu”. Select to add box. And with that box created, I’m going to shift drag it up in the place here in the container and I’m going to shift drag the regular nav menu out of it. Now if you open it up, you can see it says “Menu to display” “Main Menu” and or I can pick a different menu, I’m going to pick the main menu here. And then we’re going choose a different class here, I’m going to call that a flex_menu. I want to make sure that this name doesn’t conflict with any other regular menu name so you don’t want to leave it here with just “menu”. We’ll go ahead and close that and save the template. And then if we look at the site now, you can see the menu is now in this unordered list and that’s because we haven’t created a style for it yet so that’s what we’re going to do next.

Now we come on over here to CSS and we’re going to select the package to add and it will be the BYOB Flex Nav Responsive Menu Style and add that package. And the selector is the _flex_menu, I’m going to say main_menu… and I’m going to say “Main Menu”. At this point we don’t actually have to set anything because a whole bunch of defaults will kick in if we don’t change any of these options so we’ll start there. Go ahead and hit “Save”, come down to this and add the reference to the list and then save the CSS.

Now here’s what this looks like. This spread out off the bat, stretches the menu all the way across and then those parts of the menu that have drop downs have a little arrow off on the right hand side and then when you hover over them, they actually drop down. Now the way this is intended to work is that you’re supposed to set how many different menu items you have here and I didn’t do that here but we’ll go ahead and do that. I’ve got 5 top level menu items so we’ll come over here to the main menu package and under “Options”, instead of a “Number of Top Level Menu Items”, we’re going to pick 5 instead of 6 because that’s how many menu items we have, it defaults to 6. And then if we come look at this again, now you can see these are all stretched out across. What this is intended to do is to stretch the menu across the width of the page and it makes each menu item the same width. Now if we let it go at that, we can save the CSS.

Then we come over here and refresh the CSS in the responsinator. This is what it looks like, we’ve got our menu button up here. And then when we open it up, those menu items with additional drop down elements under them have the arrow below them and if you click them they show up and if you click again they go away. So that’s how this thing works. Now you can easily change the colors and the fonts and that sort of stuff here in the Thesis Skin Editor. You can just come on over here to this main menu style and come over and adjust options. Now the “Responsive Menu Header” is that button that you see in the responsinator, this thing right here, that’s the responsive header and so the colors and style that affect this are in that section.

For example we could make it bright red and then we could make the color grey. And then save that and refresh this. Now the heading changes from black to red and all the rest of the colors still are the same. The accent color is this color right here, so it’s the color that sits on the edge of those menu items that have drop downs. And so we can come over here and change, say the Accent Color. And we could make the accent color instead of dark, we could make it a lighter color. And we could change the Font settings and make it Arial, 16 point, we could hit save and if we come over and take a look at this, now the drop down has this light color here. And if we come over and save the CSS and come over to the responsinator and refresh it, now you see these colors has changed but not the other colors changed. And though we did end up with Arial here instead of Georgia.

So there are a number of other settings that you can set here in a similar fashion to the standard horizontal drop down menu you can in fact, set colors, Text Color and Background Colors and that kind of stuff for Links, for Hovered Links and for Current Links. And you can adjust the Menu Padding. And you can set some of the Border Colors. And in the case of a menu item that is too tall so you end up having to have more one level of text in that menu item, you can always specify a height for the menu item so that they always end up the same height even though one of them is two levels tall. You can set it so they’re all the same height by using this. And of course you can set a Submenu Width too. So the submenu width is now up to 200 so that’s the kind of control you have over this. I hope you find this useful and I hope it makes developing your site easier.