Mobile menu not working

By default, our header plugin will revert back to use the default Divi header in mobile, so that you can have slide in / fullscreen menu in mobile. From what I see, your site is already set to use the slide in menu.

But the problem is that you added the CSS to hide it. So what you need to do is: Go to WP Admin > Divi > Theme Options > Custom CSS & find the below CSS & remove it:

Code:

Log In or Sign Up to view this code.

Once you did the previous suggestion, you will see that the slide in mobile menu is now showing. And I see that you already add sticky CSS to it.

One small issue though, your close button is not visible when you click on the hamburger menu. To fix that, try the below CSS in Divi > Theme Options > Custom CSS:

Code:

Log In or Sign Up to view this code.

============

Additional things that I noticed from your site:

1. For double scroll issue, you can solve it by using one of the solutions below:
- Go to your last footer section & remove the height settings.



- Or you can just use the CSS below in Divi > Theme Options > Custom CSS to remove the last section height settings:

Code:

Log In or Sign Up to view this code.

2. For desktop menu, to make the menu section sticky, you just need to go to the menu Section Settings > Advanced > CSS Class & add free-sticky
3. As to hide certain custom header elements on the desktop / mobile, you just need to set the visibility option in the Section / Module settings > Advanced > Visibility

Let me know if you need any other clarification.

 

That's a specialty section. You can't change the structure. What you can do is to create a new normal section & copy the row to it. Check out this video: https://recordit.co/svwhQM8SyT

This is how Divi works for injected elements. It will first load the content, then only the CSS to style it.

Check this out for workaround: https://divi.help/threads/header-plugin-with-style-header-1.1793/#post-5408
**You can try method 2.

 

You can change the color in Theme Customizer > Divi Ultimate Header Plugin > Header & Navigation Styling > Menu Hover Main Color

 

Basically, once you visit the page for the first time, it will save a copy of the CSS file in your site. And for every subsequent visit to your site (from other users or other browsers), it will load the CSS file & thus there won't be any flashing.
**If you're using cache plugin, you will need to clear your cache after those CSS file are saved on your site. So that it doesn't cache the one without the CSS file.

Alternatively, you can just use free preloader plugin to hide the flashing.

 

Try the below CSS in Divi > Theme Options > Custom CSS:

Code:

Log In or Sign Up to view this code.

That's the default behavior for menu. I would suggest you to go to the menu module settings & change the alignment to center, so that it will look better. You might notice that it doesn't align center properly due to some padding right. To resolve it, you just need to go to the Row Settings & set padding right to be 0.

As to reduce the width, you can go to the Row settings & set a max-width of 850px for example.

And lastly, if you need the divider between the menu items, you just need to go to the Menu module settings > Advanced > CSS Class & add free-light

 

That should be fine.

As for the line color, try to go to the menu module settings & set the dropdown menu line color.

 

Are you referring to the slide in menu?
**It slides pretty fast for me.

I tested the previous CSS & it still works fine for me. Try to add it again in Divi > Theme Options > Custom CSS:

Code:

Log In or Sign Up to view this code.

 

1. Set your first blurb module margin left to be 0.
2. Then, go to the Row Settings > Advanced > Custom CSS > Main Element & add text-align: center;

 

For the email blurb module, you should add some margin left to it.