Just now, I had a customer who with a rather rare wish: On her website, there are parts with many submenu items. To facilitate the user experience, these parts should always show a second menu giving constantly all the submenu item.
The site is running with the Pootlepress Canvas child theme. Canvas does not have the possibility for a secondary menu aside of the top menu included.
Implementing a secondary menu in Canvas
So the first thing I tried, was to create a secondary menu following the official instructions of the WooThemes support. The explanation is great and as I already am using a child theme, implementing new functions was easy and safe. Basically, adding additional menus is following two steps. First, the new theme location is created, using the WordPress `register_nav_menus()` function in the functions.php file. After this, the new menu is already in the Menus tag of Appearance. After a new menu is created there and assigned to the just registered secondary menu, the second step is necessary. Now, the theme location has to be loaded into Canvas. Therefore, a custom Canvas hook is used (see the instructions linked above). Afterwards, the menu is found in the new location and by working on the css file, it can easily be spiced up a little.
So, overall, this was great and everything worked. But, I am using the Pootlepress child theme, so that I can customize the menu location, on this side, it was assigned right of the logo. As this is not a basic possibility of Canvas, the new secondary menu didn’t register at the spot I hoped. Instead, it was above the main menu. I did not want to get into further programming, as making it now sticky would be the next huge challenge and I was already a bit disappointed of the outcome. So, I looked for other possibilities.
Using a floating menu and a menu customizer plugin
So if not having the second menu right underneath the first menu, it should be somewhere absolutely different. A floating menu was the choice here. I used the CodeFlavors Floating Menu. Just install the plugin, assign a menu to it and it is there. Sure, now it first of all it was on every page with all the items and it was black, which didn’t suit the style of the whole page.
Fortunately, the Plugin documentation is very good and explained how to assign the menu to only specific pages. Even though this was a bit of a diligent but routine piece of work, I could easily add the function with the page IDs in the functions.php of my child theme. First obstacle cleared.
The documentation also explains, how to adjust the styles, by changing settings in the plugins css file (as in the blog picture). Second problem solved.
But now, I either had to create a new floating menu for all the parts with their submenus. Or I had to adapt the menu items for each part. Luckily, there are Page Specific Menu Items. This plugins lets you choose the visible menu items for each page separately. Using this, I just had to check the menu items to show on the pages and the new floating side menu was setup.
This solution worked perfectly – *happy*
Though I have to admit one thing – adding a new page and adding the menu to it, is quite time costly, as you always have to go in via FTP and add the page there.
