1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved How to use the Mega Menu block

Discussion in 'Support Forum' started by Neil Brierley, Feb 2, 2023.

  1. Neil Brierley

    Neil Brierley New Member

    Hi,
    1. In the Divi Header Builder section it says 'Mega Menu (must use with Header and Navigation premade blocks). Does this mean you have to have a Header and Navigation block AND a Mega Menu block in place for the Mega Menu to work? Both have menu items in them but you wouldn't want two sets of menus so don't understand how this works.
    2. What does this mean? db-mega-menu db-mega-menu-mobile-hideDELETETHISTOHIDEONMOBILE? What do you need to Delete and when you do delete what happens or doesn't happen?
    3. Is it normal for the mega menu to dramatically slow down the loading up of the page when clicking on Enable Visual Builder?
    4. When adding e.g Mega Menu plus mobile menus plus menu effects and submenu effects does it matter which order they are in?
    5. Is there any documentation to cover this?

    Many thanks from a newbie.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade gallery carousel design for your Divi site without using any plugins:View Demo
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    The mega menu block doesn't have any menu displayed. The preview photo is just to show you how it display within a menu. So, there won't be two sets of menus.

    You may try to click the Preview button on bottom left to view it live on real Divi site. If you just have a mega menu block, there won't be anything display on the preview page. And you will need to have a Header and Navigation block mix with it to make it work.
    Basically, if you just need the mega menu on desktop, but not on mobile, then you just need to delete this: DELETETHISTOHIDEONMOBILE and it will be db-mega-menu db-mega-menu-mobile-hide & your mega menu will be hidden on mobile.
    Basically, everything is built within Divi Builder & no plugins involved. So there's no additional external script loaded that slows the builder. It only depend on how fast Divi render the content within the builder.
    It doesn't matter which one comes first, it will work just fine.

    Just that for the preloader, we did specific that it should be placed as the first section.
    Everything should be pretty much intuitive. And we did have additional description at our Divi Block builder for those that required more explanation. But here's our documentation / FAQs page: https://diviblock.com/documentation-faqs/

    Let me know if you need any further clarification. Thanks.
     
  3. Neil Brierley

    Neil Brierley New Member

    Great. Thanks for your speedy and very helpful response.

    Just one follow up question. Having done some more testing. I have included a mega menu but also the mobile menu - fade in with animated hamburger menu. When I look on physical devices the mega menu shows on desktops and the mobile menu on tablets and phones but without the need for deleting DELETETHISTOHIDEONMOBILE in the mega menu.
    Presumably the mobile menu takes precedence in this configuration but is it best practice to still delete the wording or doesn't it matter?
     
    1. PRO MEMBER PERKS Divi Cart Count Plugin - Easily add cart count to your Divi cart icon. 6 different styles to choose from:Learn More
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    The mega menu only works on default menu design. It doesn’t work on our specialty menu, such as slide in menu & fullscreen menu. The mobile menu that you use is considered as a specialty menu, and that’s why the mega menu doesn’t show up on mobile. For that case, it’s optional for you to delete the CSS class text. But it’s recommended to still remove it, as your intention is to hide it on mobile.