How to get a horizontal sub-menu in WooThemes Canvas [video tutorial]

Please note: this plugin is no longer for sale.

Our new Canvas Extension, horizontal sub-menu allows you to change the default vertical drop-down menu to a much cleaner horizontal sub-menu.

This is something that, until now, would have taken a considerable amount of time and CSS skill to achieve. It’s now 5 minutes work!

As usual, please let us know what you think in the comments below!

1. Introduction

2. Setting up initial Canvas settings

3. Installing Horizontal Sub-menu and Center Menu &  Logo Canvas Extension

4. Styling it to finish


Comments

22 responses to “How to get a horizontal sub-menu in WooThemes Canvas [video tutorial]”

  1. Can you read my mind? I was just looking for this feature!

    One question: once you click an item in a submenu, will the submenu remain visible? That would be really user friendly. You know were you are and immediately see which other options you have in the submenu for this section.

    I will buy the extension when it has this extra feature, but cannot see if it is possible, since you never click on a submenu item in the videos.

    1. Hi Wouter, we have been accused of reading minds before, but sadly no! 😉 I can confirm the feature you are looking for is actually how it works, yes!

  2. Mathieu Avatar

    Hi, very nice.
    Is it compatible with the “Logo Inside Nav” plugin ?

    1. Hi Mathieu, currently not at this time, but we see the benefit of this and so are looking into it. Great question. Great feedback ; )

  3. What Pootle plugins is it compatible with? For instance, will it work with the mobile plugin? The pagebuilder?

    1. Hi Tom, we have some questions coming through about compatibility with Canvas and our other plugins so I am going to do a compatibility table tomorrow. For now, yes – it should work fine with the mobile plugin and Page Builder. Thanks!

      1. Nice, thx! I found that the Wootle menu didn’t work well with the mobile plugin. You can put that in your table 🙂 Anyway, thanks for all your great work!

  4. Gareth Avatar

    Hi Nick

    What happens if you have a large number of sub menu items ie more than one line? Does a second line appear underneath and centered?

    1. Hi Gareth, this has been designed for your items to fit on one line. Otherwise it would look messy and negatively impact user experience. Do you agree?

  5. KyleWith Avatar
    KyleWith

    Awesome. Does it also work with the top nav as well?

    1. Hi Kyle, yes – it should work fine with top nav. Thanks!

  6. Hi Nick,

    I have a bunch of sub-sub pages in my menu. Chamonet.com deal with those by listing them vertically: http://www.chamonet.com/. If you could add this functionality, that would be fantastic. Thanks!

  7. Another really useful plugin.. great, thank you. I wish you had one just for styling the current vertical drop down menu.. it’s such a pain going through css to get it look a bit nicer. changing arrows, fonts background colours.. that would be sooo usefull.

    1. Hi Kelly, we’re working on a primary nav manager at the moment… so keep an eye out for that one…

      N

  8. When you use the plugin, how do the menus render on a mobile device? The default Canvas mobile menu (with the hamburger icon and the word “Navigation”) is broken. if you have a parent menu with several child menu items, you have to click on the child menu TWICE in order to load the desired page. So, we are looking for a way around using that default mobile menu. Will this plugin serve that purpose, or will the default mobile menu override the plugin menus when viewed on a mobile device?

    By the way, when viewed on a mobile device, the pootlepress.com site suffers from this same bug described above!

    1. Hi Jon,
      I just test pootlepress.com on my iPhone 4S and the menu is working perfectly. What phone are you testing on? I’m interested in getting this sorted.
      The default mobile menu over-rides the horizontal sub menu if the responsive setting in Canvas is on. If it’s not on, then it acts as normal.
      Let me know, Nick

  9. I realize I’m a bit late here, but will this work for three levels of menu items all being horizontal? The other horizontal menu plugins I’ve seen will only work for two. Thanks.

  10. Hi Keri,

    No it doesn’t do this. I think what you mean is kind of a mega-drop down menu. We have this as a potential idea for a Canvas Extension on our ideas board. You can vote for it here:

    http://pootlepress.uservoice.com/forums/238444-canvas-extension-ideas/suggestions/6134791-mega-dropdown-menu-in-canvas-to-display-multiple-l

    Thanks,

    Nick

  11. I have installed this plugin and it does’t work. A message appears:
    “Fatal error: Call to undefined function woo_get_menu_name() in /home/barokela/public_html/wp-content/plugins/cx-horizontal-sub-menu-1.1.1/classes/class-pootlepress-horizontal-submenu.php on line 383”.

    Can you help me?

    Thank you very much.

    Ignacio Sanchez

    1. Hi Ingnacio – could be a number of things. Please email support@pootlepress.com. Thanks! N

  12. Hi Nick,

    I’ve install horizontal sub menu plugin with the latest version of canvas but it didn’t work? Is it compatible with the new version or it is because of my Visual Composer plugin?

    1. Hey Bernz, can you email support@pootlepress.com please? Probably something simple…

Leave a Reply to Nick Burne Cancel reply

Your email address will not be published. Required fields are marked *