Solved Mobile Header - Reverting Back to Basic Divi Header

By default, it will revert back to use the default Divi header, so that you can have slide in / fullscreen menu in mobile.

1. But if you wish to hide the default Divi header in mobile, try to add the below CSS in Divi > Theme Options > Custom CSS:

Code:

Log In or Sign Up to view this code.

2. For the sticky section, it's hidden in mobile by default. To show it in mobile & disable the sticky, first go to edit the custom header in Divi > DU Header - Library. Then go to the Section settings > Advanced > CSS Class & add free-sticky-mobile-show free-sticky-mobile-disable

For this highlighted section:


3. Lastly, you will need to set the above Section settings > Advanced > Visibility to show in mobile & tablet as well. Check the row & module visibility settings as well.

 

There are few things you need to know:

1. In mobile, we revert back to use the default Divi header, so that you can have slide in / fullscreen menu in mobile: https://divi.help/threads/for-mobile-menu-how-to-show-slide-in-or-fullscreen-menu.646/
2. But you can still have custom header elements below the default Divi header.
3. If you use the Divi Builder to build the mobile menu, you can only have the default slide down menu (fullwidth menu module).
4. There are two reasons why the custom header elements is not showing in mobile:

• Visibility option is set to be hidden for the section / row / module settings. For example, you can check it in the Section Settings > Advanced > Visibility
• Sticky element is hidden by default in mobile & tablet. If you need the sticky element to be shown in mobile, try to add this CSS Class free-sticky-mobile-show free-sticky-mobile-disable in the Section / Row settings > Advanced > CSS Class. But you won't need that usually, as you can just add another fullwidth menu module & set the visibility option to be shown in mobile only (as you mentioned that you wish to have Divi Builder menu in mobile).

5. Now you already know how to show custom header elements below the default Divi header in mobile. So what if you wish to hide the default Divi header & build the entire custom header in Divi Builder in mobile? There are two ways to hide the default Divi Header:

• Use the above CSS in the previous post.
• Or just Add a new section > Load from library > Custom Mobile Menu

6. Now, you get to hide the default Divi header in mobile & so you can design anything you want for the mobile header. Remember to check the Visibility option if it doesn't show up.
7. Usually, the desktop design is hard to adapt into a nice mobile design. So we usually create another section for mobile & set it to show in the mobile only by setting the Visibility option. And for the desktop section, we set it to be hidden by setting the Visibility option as well.

For example, the style 9 that you use:



In mobile, we set to hide the desktop section & use another mobile section for the social icon & blurb module:


8. Lastly, we would recommend to just use the default Divi header, as you can get to have slide in / fullscreen menu in mobile. But it's all up to you to see which suits you best.

Take a look at our demo 9 that you used: https://header-demo.diviultimate.com/style-9/

We use the default Divi slide in menu in mobile + custom header element (social icon & blurb) below the Divi header.

Let me know if you need any further explanation.