Jumbo is a WordPress menu plugin that you can add to any theme, and it comes with a bit of a unique twist. Next to allowing you to build a bold, memorable and fully responsive full-screen menu, you can also create an optional, secondary drop-down menu.
Furthermore, you can set up a Gravatar image that will appear right next to the highly-visible menu buttons (a non-Gravatar image can be used as well), linking to any page you wish. For example, you can direct it to a custom profile or an ‘about me’ page that you’ve created (great for owners of personal blogs) but ultimately its use is up to you.
Thanks to its extensive customization possibilities, Jumbo is also suitable for essentially any site. Nest to choosing between a standard vertical or a column-based full-screen menu, you can also make substantial customizations like change all colors, add a background image, re-position different elements, change the menu appearance speed, direction and much more. As can be seen from the few examples and details on this page, you can end up with results that look and feel vastly different.
UPDATE 3.3 - It is now possible to add a custom text label to the main menu button
UPDATE 3.2 - added column-based menu design - added options to customize line heights (separate options for top-level and sub-menu items) - added options to change main menu font sizes (separate options for top-level and sub-menu items) - separated main menu's color options (colors of top-level and sub-menu items can now be customized separately) - defaulted main menu's opacity to 100% (can still be changed in the settings)
UPDATE 3.1 - Background image can now be displayed as a pattern. - Added option to lock body scroll when menu is opened.
UPDATE 3.0 PLEASE NOTE! Customization options are now under "Appearance > Customize > Jumbo Plugin". If you're upgrading from a pre-3.0 version of Jumbo, you'll need to re-enter your customization settings due to the WordPress Live Customizer integration. New features in 3.0: - Added option to hide your theme menu (by class/ID) - Completely re-built secondary drop-down menu --- It is now possible to add descriptions to menu items --- When dropdown menu has enough menu items to reach past the bottom of the screen, it now becomes scrollable (great for mobile screens) --- Added new animation to dropdown menu's sub-menu arrows - Custom text can now be added to Gravatar hover tooltip - Added rounded corners option to primary menu button icon - Updated icon set to latest version --- Added option to prevent icon set from loading (for cases where your theme already has the same icon set loaded or if you just don't use any icons with your menu items, so the icon set wouldn't be loaded unnecessarily)
UPDATE 2.0 - added option to hide main menu button (for cases where users want to use a custom element to activate the main menu, documentation updated accordingly) - updated icon set to latest version
UPDATE 1.9 - main menu is now 2-level (sub-menu items appear horizontally bellow the main menu item)
UPDATE 1.8 - added alternate main menu button animation - added option to close menu when menu item is clicked
UPDATE 1.7 - Secondary menu is now multi-level (sub-menus are now also activated by arrow, while top-level menu item can itself be a link) - Updated icon set to latest version
UPDATE 1.6 - Logo image (or any other image) can now be added above the main menu - Theme fonts can now be used on main menu (+ menu descriptions), secondary menu, as well as Gravatar tooltip - Added quick links to settings page for easier navigation
UPDATE 1.5 - menu buttons can now be placed to the right side of the screen
UPDATE 1.4 - when main menu is opened, the menu button now animates into an "X" - updated icon set to newest version
UPDATE 1.3 - added option to show the menu only to users who are logged in - added option to hide the menu at specific browser widths / resolutions - added option to make main and secondary menu button backgrounds transparent
UPDATE 1.2 - main menu can now be set to be opened by default on the front page - main menu can now slide-in from top, left, right or bottom (fade in/out still available as well) - added option to use a non-Gravatar profile image
UPDATE 1.1 - secondary menu now supports sub-menus - secondary menu now supports icons (300+ icons available, see updated documentation for details) - secondary menu can now be given custom width - main menu's background color transparency can now be changed, allowing for see-through menus where your page content is visible - added subtle Gravatar hover effect (can be disabled) - added all-uppercase options to main menu's items (small + big text separately) and secondary menu's items (top-level and sub-menu items separately)
Is there a way to insert this into a template via php?
Jumbo is for WordPress. I may make a non-WP version at some point but no concrete plans right now.
I understand. I'm talking about WP template like in the header.php. Instead of having it fixed to the top/etc..
Ah I see. Yeah, I don't see a problem there. You'll just have to set it to position absolute on the settings page and then insert the actual menu code into your theme. Send me an email through the form on my profile and I'll send you the exact code you need to insert.
If you can add the option to be open by default on the front page only I'll purchase this plugin!
Ah, a rather desired feature :) I'll make sure to add it in the next update.
Cheers :) And just a heads up, I'll probably release the next update next week.
AWESOME as ever! JS version at some point? Will almost certainly add it to my list of your files very soon.
Cheers mate :) As for a non-WP version, no plans right now but never say never.
So far so good... two questions: 1) I'd like to make anywhere on the overlay (except for the menu links of course), clickable to close the overlay. 2) Is there a way to change the hamburger icon to an X when the overlay is active? This should be pretty straightforward with Font Awesome, I just need to know the code to implement this. Please advise. Thank you!
Hi there. 1) This isn't a feature since it would be confusing from a usability standpoint. ESC does close the menu though. If you really want it then I can do that as a quick paid customization however. Shoot me a message through the form on my profile if that's something you'd like to pursue. 2) Someone else asked for that also. I'll probably add that as an option in a future update. Cheers.
Thanks for the follow up. Not sure I agree that #1 would be confusing from a usability standpoint. In fact, I've seen this feature on several websites and found it quite intuitive. Aside from clicking the menu links li's, the logo/icon and the hamburger icon, as a user I would expect clicking anywhere else would escape the overlay/lightbox. I appreciate you offering to do it for a fee, but I'll take a stab at this one myself. Great plugin overall, very easy to implement and customize.
Cheers, and thanks for the rating! :)
Hello Bonfire, it would be very cool to be able to customize the 3 horizontal lines menu symbol. Every responsive website has a menu like that already, so adding Jumbo 3-in-1 as an Extra menu would be clever. It would need to be different tho, something like a + symbol.
I'll be updating several of my plugins over the summer, could potentially do that as well. No promises, but noted :)
:) can the Icon image automatically adjust for individual users in a subscription site? WP multisite?
Hi. Nope, that's really intended for the site author/admin. Cheers.
Hi there Can we change the position of the text "learn" in your demo here http://bonfirethemes.com/jumbo/demo-two/ to below the big link "who we are"? We would like to make a similar thing but in our case the large word has to come first and then the small description would follow below. Thanks
Hi. It is possible but would have to be a quick code edit. Please get in touch with us via the contact form on our profile (from the account your purchase was made from) to discuss further. Cheers.
Hallo I just installed the plugin (it was exactly what I was looking for, thanks!) however I'm having a problem, the menu won't open at all. I'm using the Divi theme and tested Jumbo on another Divi site and it works without a problem so went on to disable plugins and for some reason it's clashing with NextGen Gallery (even on the pages that aren't displaying a gallery.) Do you have a solution for this please? Thanks in advance! Lynne
Hi there, thanks for the purchase. NextGen has the known habit of rearranging a site's code for whatever reason (js files above the wp_footer tag etc). Long story short, changing the two instances of "wp_footer" to "wp_head" in jumbo.php should do the trick. That'll move Jumbo's code above the code it's dependent on, which is how it should be. Cheers.
It's working like a dream now, thank you!
Hi, Support one page Menu with row ID as url?
Hi. I don't understand the question, please be more precise. Cheers.
Hi , we have a one page webseite and we want to create a overlay menu, each menu point must drive or scroll to a row ID on same page and the overlay must disappear and offcore show the Row or area, do your plugin support that?
Yes, Jumbo has a "Close after click" option. It's not smooth scroll at this time though, it'll just jump to the anchor and close the menu. Still not sure what you mean by "offcore show the Row or area" though. Cheers.
thanks , last question , can i use with visual composer?
Yes, anchor links work. No shortcode for the menu button. Cheers.
thanks , last question , can i use with visual composer?
Haven't tested with VC. Cheers.
can i set the menue-icon to a fixed position (fluid)? can i activate the menue by default? thanks
Hi there. The menu buttons can be given fixed (this is the default setting) and absolute positioning (changed on the plugin's settings page). Menu can be set to be open by default on all pages through a little customization. I have it handy though, another buyer just asked for the same thing an hour ago.
Is it possible to add another menu button (something like a home button)? If not would it be hard to hack?
If you know code and know how to add it then it's not that difficult, no. But it is something you'd have to do on your own as that's not something Jumbo comes with. Cheers.
Man, i'm a newbie to WP, but don't worry this is my only question :) How to remove the existing menu? I installed Layers and i tried everything for now. The original pages appear on top right of the site (ex: Home page, services, contact). Jumbo is there, everything works fine when i click, but i don't know how to remove the original wordpress default menu..
Hi there. Jumbo doesn't affect or interfere with theme menus. If you wish to hide your theme menu, then that's something you have to ask your theme developer. On a number of themes, the menu is hidden until an actual menu is attached to the theme's menu location. But if you can't remove the menu by just de-attaching it from the theme's menu location, then just a single line of CSS will do normally, which the developer should be able to give you very quickly. Cheers.
Thanks ;) i will be able to customize my site during the weekend. Can i modify the button shape or it has to be a square? Cheers mate.
It's a square so it would go well with the other elements. You can change the button colors or hide the background altogether though.
Hi Bonfire. Great plugin! Have a scheduled date for the next upgrade,? I need to put the logo above the menu and i was reading that you will include in an upcoming update. It could put the logo with some description? Thanks in advance
Yeah, I'll include logo+tagline in the next update. Don't have any dates to give right now but I'll do it sooner rather than later.
Just a heads up: the option to add a logo is available as of version 1.6, which is available now.
Hi, I've been working on a new website for a few days and I am using your plugin as a sort of welcoming screen on my homepage. I like this plugin a lot! There is one thing I would like to ask. The original plan was to have a simple one page website, with only three sections on it. I wanted to use your plugin in fullscreen when first opening the page, with three menu items linking to those sections of the page. However, that doesn't work, it doesn't open links on the page that is behind the full screen view. Is there maybe a way to work around that? For now I have chosen to use three different pages, but I have my reasons to prefer a one page setup. Hope to hear from you!
The Jumbo menu items are links like any others. They lead to the page they're linked to. Sounds like you're trying to link to an anchor on a page the user is already on, which can be done by just adding "#anchor-name" to the end of the link, but no, the full-screen menu doesn't close itself automatically upon the user clicking on the menu item (it has no way of knowing what you're trying to do). Cheers.
Hi, thanks, I figured as much. No biggie, I'll just use seperate pages instead of seperate elements on the same page. Another issue has come up however, and it's very strange; the logo disappears. After setting it it does work, but after a few refreshes the logo is no longer being displayed. When i check out the logo's location there a part in there that shouldn't be there: http://www.mydomain.nl.com/page/[site_url]/wp-content/uploads/2015/01/picture.jpg After setting it again the same thing repeats; it works for a few moments, and than disappears. Am i the only one having this problem?
Nope, not seeing that. Logo is loaded from the correct URL and no funkyness gets added. It uses the built-in logo uploader so all the functionality is coming from WP's side.
Hm, strange. I have the same problem on two seperate wordpress test setups. Have a look at this test website: http://www.testmetmarc.nl/2015/ If you rightclick on where the logo should be and check the file's url you'll see the part '[site_url]' in it.
It's feels as of your installation doesn't know its own address. What I'd try is making sure you have "WordPress Address (URL)" and "Site Address (URL)" fields filled correctly under your WordPress settings in Settings > General. Alternatively, in Jumbo's include.php, you can try changing "home_url" with "site_url".
Hi, I'm wondering if you have a live example of the new submenu feature on the main menu? Sounds like this was recently added. All of my main menu items have submenu's and I'd like to see how this works. Looks like a great plugin! Thanks.
Sure, here's a quick look. When the screen is narrower (mobile), the sub-menu items stack below each other. Cheers.
Hi, I wonder if it would be possible to make a revolution slider stop when you open the full screen menu? On this site you can see the menu and the slider that I would like to stop from changing slides. http://4arkitektur.createremain.se/
Hi. I see what you're after but that's definitely something you need to get a freelancer for as it's not related to Jumbo at all. You'd have to find out how RevSlider's slides function and then find a way to trigger it on command. Really can't help there mate, you need someone familiar with the under-the-hood workings of RevSlider. Cheers.
This plugin is ALMOST perfect for what I needed, 2 suggestions: 1. A way to insert into a top nag instead of using default positioning. 2. A close button after the menu drop down. This way if we did just add the "jumbo-menu-button" class to another item then there would be a way to close it. Thanks for listening.
Hi there. 1. Into a top nag? What's that? :) 2. I may add that in an update, thanks for the suggestion.
Sorry that was NAV. A way to insert it in places like top NAV like the green area on Avada http://cl.ly/WbN2
You can't hardcode it into the theme, but by playing around with the fixed/absolute positioning, you could at least get close. With all themes responsive nowadays (and header areas possibly looking way different on touch devices), and they're all different, it would be pretty impossible coming up with something that would suit all cases on all resolutions I'm afraid.
when i reload my page the original red box with icon flashes up on the left hand side of screen, then the right, any ideas? http://7a0.421.myftpupload.com/about
I don't see anything except unstyled text on that page.
example - https://www.dropbox.com/s/g9i2o1i4ccd1lhb/error.mov?dl=0
Looks like Jumbo isn't being loaded fast enough on your site/server. You can try moving Jumbo's code closer to the top; in jumbo.php, change the 2 instances of
thank you it looks like this has helped reduce the loading speed and reduce the frequency of this odd loading. thank you for your timely response.
hello, i just got this installed and setup, i small problem is that the icon is a bit low in my header vertically and not lining up with my logo, how to fix please?
Hi. Got a link for me?
http://goo.gl/58x7Z9 i only have it set it up for mobile
never mind, I figured it out. great plugin!
Was about to say that it looked nice and aligned to me :) I don't know how you went about it but just throwing it out there that there's an option to fine-tune the alignment of the menu buttons on Jumbo's settings page. Cheers.
I would like to purchase just need to know can the menu overlay content on the page?
Hi. Not quite sure what you're asking here but yes, the full-screen menu opens above your page content. Cheers.