Add an Accordion menu for mobile devices to the Storefront Echo theme

My menus go off the screen, how can I have a multi-level menu on a small screen?

Storefronts Echo theme is designed to be responsive as the current hip jargon goes. That is to say the layout changes to adapt to different devices and screen sizes. Designing for small screens, meaning mobile devices means juggling various priorities. When Echo was first released it only supported one level of menu, which seemed like a reasonable thing for working on mobile devices. Still people wanted multiple level menu support, so it was added. Then came the inevitable “why does my multiple level menu go off the screen.” Well obviously because the screen is very small is the answer, but what to do about it?

This may be a reasonable solution. I have yet to subject it to testing. It will do no harm and is easily removed, so give it a try, let me know in the comments if it works. As the title says this will require two components, a plugin and some code. Three if you want to count the PHP and CSS code as separate items! This is quite easy even if you have never edited PHP before.

First the plugin

You will need to install the JQuery Accordion Menu Widget. Quite a mouthful. You can install from the WordPress plugins page as normal. Search for it by that exact name in the WordPress plugins page. You have the right one if it is made by Lee Chestnutt.
For information on plugin installation, parameters and usage see the plugin makers site.

OK it is installed, now what?

So yet again it is time to make a little PHP change to add some functionality. One extremely simple PHP edit. If you have not done this before see the note “Tools” at the bottom of this post.

Locate the header.php file which is in Echo theme folder. Make a safe copy somewhere in case you have problems.
Around line 98 in Echo 1.4.1 you will find a lot of divs being closed. I have included enough code so you can find the correct section. The line may vary slightly depending on your version. Find the right closing div, in this case line 98.

				<?php get_search_form(); ?>
				</div>
			<?php } ?>
			<div class="clear"></div>
			</div>
		</div>
		</div>
		<div class="clear"></div>
</div>
<div id="main">

Make a blank line after it and add the line of code highlighted as line 99 below. I have included the block of code from above to be clear. You are adding just the one highlighted line.

<?php get_search_form(); ?>
				</div>
			<?php } ?>
			<div class="clear"></div>
			</div>
		</div>
                <div id="mobile-menu"><?php echo do_shortcode('[dcwp-jquery-accordion menu="MyMenu" save="true" expand="true" animation="fast" skin="graphite"]'); ?></div>
		</div>
		<div class="clear"></div>
</div>
<div id="main">

This adds the JQuery Accordion Menu to the theme. You must substitute the name of your WordPress custom menu for “MyMenu” in the code above. You could have two custom menus in WordPress and choose to display a different one in the code above for small screens and another on larger screens.
You will notice several options after the menu name.

save=”true”

Setting this allows the menu to remember its open/close state when browsing to a new page. It requires cookies. This way when a top level menu item is clicked the site will navigate to that page but keep the menu open. Remember mobile devices do not support hover. As I mentioned you could have a different menu for this by setting up a second menu in WordPress. You could avoid the page change when a top level item is clicked to reveal the sub menu by setting up non-navigating clickable top level items. Make a custom menu item and use the # tag as the menu URL. See my custom menu post video.

animation=”fast”

The speed at which the menu will open/close, your options are slow/normal/fast

skin=”graphite”

This is the CSS style. Graphite matches Echo very nicely. You can of course customize it with extra CSS or even write your own. The built in options are black/blue/clean/demo/graphite/grey

You can control several more options, these are I believe the best settings for the menu in this situation.

Style it you said?

Well actually we will not just style it with CSS we will control it as well. The menu has been added in a div with id “mobile-menu” Using media queries in CSS we can turn it on and off according to the size of the users screen. What size you use exactly is up to you, but below I am supplying some options. One would work well on iphone1, 2 and 3 (320 × 480 pixels), the other would include the menu on iphone 4 and 4S (640 × 960) as well, this may even include some small and old computers. For more on CSS Media Queries read this article, also searching will turn up lots of information.

I decided to keep the Cart $0.00 value display from the themes menu. Remember to show the cart in the menu you need to go to Storefront Options Panel/Navigation Tab and check “Show cart total tab in navigation?” As I was keeping that bar I decided also to do away with the free floating mobile search of the theme and retain the regular menu bar search on small screens. There is plenty of room for it with all of the normal menu items removed. Again you must have Search turned on in Storefront Options Panel/Navigation Tab.

The CSS code can be added to your custom.css file if you have one, or if you do not have much CSS just add it to the Storefront Options Panel/Style Tab Custom CSS box.

Under 540 will cover iPhone 1, 2 and 3 in both landscape and portrait mode

/*if screen is below 540 wide*/
@media handheld, only screen and (max-width: 540px) {
#nav{display:none;}/*hide the regular menu*/
.mobilesearch{display:none !important;}/*hide the the themes mobile search*/
.navsearch{display:block !important;}/*show the regular search in theme menu*/
}
/*over 540 pixels wide*/
@media handheld, only screen and (min-width: 541px) {
#mobile-menu{display:none;}/*hide the JQuery menu*/
}

Change the numbers to 767 and 768 to make this work on iPhones up to the 4S in portrait mode. If you want to include landscape mode you will need to go with 960 and 961 but this will include quite a few computers.

OK it is controlled now how about some style?

You can style the menu, I am not going to get into all of the CSS here. If you are not happy with any of the inbuilt styles you need to learn some CSS and get to work. I did think one basic change was worth making. Adding the CSS below will make the height of the Accordion menu more closely match the height of the regular Echo menu. Be aware that the background of the Accordion menu is images. You would need to download the appropriate png file and alter it to change the color. In the case of the graphite style it is in the plugin folder skins/images/bg_black.png.

You must substitute the name of your menu in place of MyMenu, the plugin creates this class which includes your menus name. Watch out as the CSS is case sensitive. Although the custom menu is called MyMenu in the WordPress backend the plugin will write the class to the page all in lowercase. Use the real name MyMenu and it will not work.

/*set height of menu items*/
.menu-mymenu-container {
  line-height:30px;
margin:bottom:25px;
}
/*add a little space belwo menu if you like it */
#mobile-menu {
     margin-bottom: 25px;
}