Solved Can I hide whole menus for tablet and phone

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.

 

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.

 

To hide the Divi default header on mobile, try the below CSS in Divi > Theme Options > Custom CSS:

Code:

Log In or Sign Up to view this code.

 

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.

 

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.

 

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.

 

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.

 

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.

 

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.

 

From your URL, this is what I see:



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:



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:

Log In or Sign Up to view this code.

 

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.



*Remember to clear your Divi static CSS file cache.