This is part of the ongoing Divi Header series that I’ve decided to keep doing.

Here’s another header tutorial

I’m sure Elegant Themes will come out with a slew of header options in the visual builder (probably) soon, but for now we’re gonna take the raw code-editing approach.

So… have you noticed that the full screen menu is annoying from an UX perspective?

Have a look.

Here’s how to fix it.

The problem

The full screen menu has been around ever since Divi first came out. It’s the least used menu format from my experience browsing Divi websites. I don’t use it much (or at all) either.

I think it’s because of the following UX problem.

Here’s the hamburger:

Divi Tutorial - Adjusting the Full Screen Menu

(To learn how to change the hamburger icon, click here)

And here’s the screen with the full-screen menu:
Divi Tutorial - Adjusting the Full Screen Menu

See that huge positioning discrepancy? The mouse has to move too much for something that should have been a simple click on/off.

I think this is a problem.

And so we change it.

This one’s pretty simple, and not scary at all!

Child theme

Yes, any edit you make to the theme files should be made in the child theme.

Get a pretty useful child theme by clicking this text.

Moving on.

The video

The Code

Open up your header.php file.

On line 129 you will find this:

<span class="mobile_menu_bar et_toggle_fullscreen_menu"></span>

Add a container around the close button like this:

<div class="container">
	<span class="mobile_menu_bar et_toggle_fullscreen_menu"></span>
</div>

It should look like this:
Divi Tutorial - Adjusting the Full Screen Menu

And now we style it. Easy peasy.

.et_header_style_fullscreen .et_slide_in_menu_container {
	padding-top: 0px !important;
}
.et_header_style_fullscreen .et_slide_in_menu_container span.mobile_menu_bar.et_toggle_fullscreen_menu {
	top: 24px;
	right: 0px;
}
/*This adjustment seems to shift the logo on mobile, so the following is needed */
@media all and (max-width: 980px) {
  #logo {
          margin-top: 16px; /* Adjust this according to your logo */
  }
}

If you want to learn about how to make Divi websites that are custom responsive, then click this text and check it out!

Notice:

Please consider signing up for my newsletter for… two emails (at most) a month of news, updates, and special offers, including child themes and more courses. I won’t do anything else with your email and name except for those couple of emails a month. Sound ok? Cool! The signup form is right here!


 

Photo by mohammad alizade on Unsplash