1. HOT Be a Pro member & access all our premium Divi extensions, including Divi Block, popular Divi Ultimate Header Plugin, etc.LEARN MORE
This is the support forum for Divi Ultimate Header Plugin.

To access this support forum, you need to purchase Divi.Help Pro Membership.

If already purchased, kindly login to your account to access it.
For Divi community forum, kindly visit here: https://divi.help/forums/get-help-on-divi-wordpress.30/
Dismiss Notice
NEW Divi Login Customizer Plugin - Instantly get a beautifully crafted login page design for Divi site.
View premade login page design
BEST Divi Block - An online drag & drop tool to easily mix & match 417+ premade blocks (light / dark version), including custom header, fullscreen / slide in mobile menu, mega menu, custom footer, page design blocks, before / after image slider, promo bar, floating button, logo carousel, content toggle, slide in bar, etc.
Learn MoreTry Free Version

Solved Can I hide whole menus for tablet and phone

Discussion in 'Basic Support Forum' started by Reem, May 6, 2022.

  1. Reem

    Reem New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Hello,
    I have 2 separate menus on my website, one on the top and the other as a vertical menu. However I need to "combine" both menus for tablet and desktop. I have created a "full" menu that I only want to be displayed on tablet and phone, but when the website is viewed on desktop I want the "full" menu to hide and the 2 other menus to show. How can I do that?
    Thank you
    Reem
     
    1. AD Subtle image hover effects for Divi sites. Comes with 250+ amazing designs that fill up your day to day needs:Learn More
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    For your vertical menu, you just need to clone the menu module & select your desktop menu items & set it to hide on the phone and tablet (Menu module settings > Advanced > Visibility).

    And you just need to set your current vertical menu module to hide on desktop (Menu module settings > Advanced > Visibility).

    And lastly you just need to add your top menu module at the top section & set it to hide on phone and tablet & you should be good to go.

    Let me know how it goes.
     
  3. Reem

    Reem New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Thank you for your reply.
    Can I just clarify a few things.
    I've set the visibility for my vertical menu (from the Divi library) to hide on tablet and phone as I only want it displayed on desktop
    Then in my regular divi menu I've set the full menu (the menu I'd like to appear as a hamburger menu for tablet and phone) to hide on desktop allowing the another divi regular menu to show only fro desktop.
    Logically this should work, as I've switched off the 2 menus that should only visible on desktop, and activated one full menu to show as a hamburger on tablet and phone, but for some reason I still have 2 hamburger menus showing on tablet and phone.
    Here's the website www.gerry.reemk.co.uk
    Thank you
     
    1. AD Free Divi promo bar + close button layout:Learn More
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    I see that for your case, you do not wish to have the vertical menu as slide in menu in mobile, as you already removed those sections. And thus the default Divi header is used instead.

    As for your question:

    1. By default, it will revert back to use default Divi header on mobile, so that you can have slide in / fullscreen menu on mobile: https://divi.help/threads/for-mobile-menu-how-to-show-slide-in-or-fullscreen-menu.646/

    2. And thus, there's 2 mobile menu appears on your site. First one is the default Divi header. And the second one is the top desktop menu. And so you will need to set your top menu to be hidden on mobile & tablet as well.

    3. The default Divi mobile header menu items is taken from Primary Menu & Secondary Menu, which can be set at WP Admin > Appearance > Menus.

    Let me know if you need any further clarification.
     
  5. Reem

    Reem New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Thank you for that.
    Is there a way I can use the Divi Ultimate headers instead of the Divi default menu. I'm finding it weird and difficult to use. The dropdown menus don't show, and they have a strange width. I cannot use the theme builder as it messes up the layout I have with Divi ultimate. Any advice?
    Thank you again for your help. Sorting out the menus is the biggest hurdle on this project :(
     
    1. AD Add preloader to your Divi sites easily & it's made with CSS + minimal HTML markup:Learn More
  6. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    To hide the Divi default header on mobile, try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    #main-header, #top-header {
        display: none!important;
    }
    #page-container {
        padding-top: 0!important;
        margin-top: 0!important;
    }
     
  7. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Just curious, why don’t you use the vertical menu as slide in menu on mobile? See screenshot below.

    By default, the vertical menu style has a section with hamburger menu that trigger the vertical menu on mobile, but it seems like you removed it.

    B0FAF63A-1E0D-41F3-BEED-1DF5144109D5.jpeg
     
    1. AD Divi Ecommerce is a premium child theme designed to sell products online with Divi and WooCommerce:Learn More
  8. Reem

    Reem New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    To be honest I am getting a little confused.
    do I need 3 menus?
    2 on desktop
    1 tablet and phone.
    I thought that I was using the vertical slide in menu, which is what's showing on desktop.
    I'm a little lost :(
     
  9. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Yup. That's because For the tablet and phone, you wanted to combine both the desktop menus. That's why it need to be a different menu module.
    Yup. But it seems like you removed the mobile menu trigger section. That's why the vertical menu only shows up on desktop. If you wish to add back the mobile menu trigger section, try the below:

    1. Download the attached mobile-menu-trigger.json
    2. Import it in Divi Library.
    3. Then go to edit your custom header.
    4. And add a new section > Add From Library > Mobile Menu Trigger Section
    5. Then go to your Vertical Menu Section & set the Visibility to be shown on all devices.
    6. And lastly, remove your additionally added menu section for mobile.

    And that's about it.

    ========

    But since you need to have a different menu for mobile, here's what you need to do:
    1. Clone your current vertical menu module.
    2. Select it to be your mobile menu items.
    3. And set the cloned menu module to be shown on mobile & tablet only.
    4. And set the original vertical menu module to be shown on desktop only.

    Hope I made it clear. If you need any further clarification, feel free to let me know. If needed, we can help you set it up, as per the steps above.

    Let me know. Thanks.
     

    Attached Files:

    1. AD Easy-to-use drag & drop interface to mix & match 220+ premade Divi blocks & export as json file:Try Free Version
  10. Reem

    Reem New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Thank you for that.
    The issue is that i am merging both menus for tablet and mobile. So the menu that shows on tablet and mobile has all the items in the slide in menu and all the items in the top menu so merging it all together. The 2 menus on desktop become one full menu on tablet and mobile. I'm not clear on how to "merge" the 2 menus for tablet and mobile.
    Thank you
     
  11. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    I see. You just need to create a new menu (merge both menu items) at WP Admin > Appearance > Menus.

    Then clone a new menu module & select the newly created ‘merged’ menu.
     
    1. AD Create awesome masonry galleries with Divi Masonry Gallery:Learn More
  12. Reem

    Reem New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    a few more questions regarding the steps
    1. Download the attached mobile-menu-trigger.json
    2. Import it in Divi Library.
    3. Then go to edit your custom header.
    4. And add a new section > Add From Library > Mobile Menu Trigger Section
    5. Then go to your Vertical Menu Section & set the Visibility to be shown on all devices.
    6. And lastly, remove your additionally added menu section for mobile.

    For step 3, this is done through in the divi library correct?
    for step 5; is this the DU regular Menu module I have added in step 3?

    Thank you so much
     
  13. Reem

    Reem New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    The clone needs to be on the same layout which I have built in the Divi library which i then assigned in the DU header settings (I can only choose one menu in the settings)?
     
    1. AD Free Divi content toggle layout:Learn More
  14. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    That’s right. WP Admin > Divi > DU Header - Library.
    For step 5, I’m referring to the whole Section Settings for the vertical menu. Not the menu module settings.

    This is because I saw that you set the vertical menu section to be hidden on mobile. You will need to re-enable it back.
     
  15. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Yup. Clone the vertical menu DU regular menu module. And yes it can only assign one menu. That’s the reason why you need to clone it & choose the merged menu.
     
    1. AD Power up your Divi sites with tons of new functionalities:Learn More
  16. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Whenever you make any changes, remember to clear your Divi Static CSS File Cache at: WP Admin > Divi > Theme Options > Builder > Advanced > Static CSS File Generation > Clear

    Alternatively, you may just go to WP Admin > Divi > Theme Options & click Save.

    If you still have trouble settings it up, let me know.
     
  17. Reem

    Reem New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    I'm so nearly there. The only issue is the width of the dropdown menu on tablet and mobile. They do not seem responsive.
    How do I adjust the width?
    Thank you
     
    1. AD Subtle image hover effects for Divi sites. Comes with 250+ amazing designs that fill up your day to day needs:Learn More
  18. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    From your URL, this is what I see:

    upload_2022-5-13_11-21-31.png

    The top section is what I proposed earlier, which is correct. But you will need to set the bottom menu section to be hidden on mobile.

    But upon clicking the top hamburger menu, the vertical menu didn't show up. It's because the vertical menu section is being set to be hidden on mobile. By vertical menu section, I'm referring to the below screenshot:

    upload_2022-5-13_11-25-28.png

    But it seems like you're asking another question: Width of the dropdown menu.

    Anyway, it seems like your default dropdown menu width is being altered by your other custom CSS.

    To fix it, try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    .et_mobile_menu {
        width: 100%!important;
        margin-left: 0!important;
    }
     
  19. Reem

    Reem New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    I am so sorry for testing your patience with me. Can I please go back to the beginning.
    I need 3 menus in total.
    2 menus displaying different items in each to display on desktop (Menu 1 vertical menu with item A, B, C, and Menu 2 is the top menu with items D,E,F)
    On tablet and mobile I need a menu that joins all the items under one Menu 3 (Items A,B,C,D,E,F)

    From what I understand is that I'd use the DU vertical vertical menu (style 11) for the left hand vertical menu 1, I'd use the top menu 2 (regular DU menu) menu 2. Both for desktop (disable them on desktop and mobile)
    Add DU regular menu 3 to display as hamburger and to display only on tablet and mobile.

    Is that the correct way to go about this?

    Thank you as always.
    Reem
     
    1. AD Create awesome masonry galleries with Divi Masonry Gallery:Learn More
  20. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    I see that you're almost there. For the third menu module, you just have to clone the vertical menu module. See screenshot below:
    **And set the menu module Menu items & Visibility settings accordingly.

    upload_2022-5-14_21-34-30.png

    *Remember to clear your Divi static CSS file cache.