Hi All

Hi Mark,

I was just reading through the posts and trying to understand the behavior, which led me to the changes between Divi 4 and Divi 5 (due to the new React architecture). There might be other, less technical solutions out there, and perhaps other members here in the forum will chime in with an idea. In the meantime, here is a technical possibility for you to try out.

When moving from Divi 4 to Divi 5, the menu is presented in a different way due to design decisions and the underlying React framework in which Divi 5 is developed – especially with Theme Builder-based headers like Mak's Builder template.

Before we get into the fix, let's quickly clarify what you're seeing and why (this explanation for all level of users) :

---

What Divi 5 is doing – and why it's correct

• On desktop → Divi displays all your menu items in the header as a full navigation bar. This is exactly what you want.
• On mobile (below 980px) → Divi automatically collapses that navigation into the hamburger icon (≡). This is also exactly what you want.

The hamburger icon on mobile is not a problem – it is the intended, correct behaviour. What you're missing is simply the "Select Page" text label that used to sit next to that icon in Divi 4. In Divi 5, particularly with custom Theme Builder headers, that label is no longer included by default. That's the only gap we need to close.

---

Solution 1 – CSS (quickest fix, no rebuilding required)

This approach leaves your existing Mak's Builder header completely untouched and simply adds the label on top of it.

Step 1: In the WordPress Dashboard, go to:
Divi → Theme Options → Tab: General → scroll to the very bottom → field: Custom CSS

Step 2: Paste this code:

/* Adds 'Select Page' label next to hamburger icon – Theme Builder header */
.et_mobile_nav_menu:before {
  content: 'Select Page';
  font-size: 14px;
  position: absolute !important;
  top: 4px;
  right: 40px;
  color: #000000;
}

Always backup bevor using code & test code in a staging environment instead of live-site bevor

Step 3: Click Save Changes and check your site in mobile view.

The label will appear to the left of the hamburger icon on all screen sizes below 980px.

Note: This code targets the CSS class used by Theme Builder headers (Mak's Builder included). If for any reason the label doesn't appear, try replacing the . with a # at the very beginning of the first line – that targets the classic Divi header instead. Since you're on a Theme Builder template, the version above should be the correct one.

Tweaks you can make directly in that code:

What you want to change What to edit The label text Replace 'Select Page' with anything you like, e.g. 'Menu' Text colour Replace #000000 (black) with your brand colour hex code Text size Change 14px to suit your header Label position Adjust top and right if the placement is slightly off

---

Solution 2 – Native Divi 5 approach (no CSS, more control)

If you'd prefer a fully visual solution without touching CSS, Divi 5 gives you a clean native alternative directly inside the Theme Builder:

1. Go to Divi → Theme Builder and open your Global Header for editing.
2. In the same row as your Menu Module, add a Text Module with the text "Select Page" (or whatever label you prefer).
3. Style it to match your header design.
4. Open that Text Module's settings → Advanced tab → Visibility → set it to show on Phone only (disable Tablet and Desktop).

This way, the label is a proper Divi module – fully editable in the Visual Builder, no code involved, and it only appears on mobile where it belongs.

This approach does require a small layout adjustment inside the header row to position the text and the hamburger icon side by side correctly. If you're not comfortable with that, Solution 1 is the more straightforward path.

---

Should you keep Mak's Builder preset or rebuild from scratch?

For what you're trying to achieve right now – adding a single label – there is absolutely no need to replace or abandon Mak's template. Either solution above works alongside it without any conflict.

If at some point in the future you want deeper control over the mobile menu (animations, slide-in panels, full-screen layouts), Divi 5 natively supports this through its Canvases + Interactions system, which allows you to build a completely custom mobile menu layout directly in the Visual Builder and connect it to the hamburger icon trigger – no third-party plugins required. That's a more advanced topic and not something you need to tackle today, but it's good to know it's there.

---

Start with Solution 1 – it's the fastest and least invasive. If you run into any positioning issues, share a screenshot and we'll sort it out from there.

Before we get into the fix, let's quickly clarify what you're seeing and why:

---

What Divi 5 is doing – and why it's correct

• On desktop → Divi displays all your menu items in the header as a full navigation bar. This is exactly what you want.
• On mobile (below 980px) → Divi automatically collapses that navigation into the hamburger icon (≡). This is also exactly what you want.

The hamburger icon on mobile is not a problem – it is the intended, correct behaviour. What you're missing is simply the "Select Page" text label that used to sit next to that icon in Divi 4. In Divi 5, particularly with custom Theme Builder headers, that label is no longer included by default. That's the only gap we need to close.

---

Solution 1 – CSS (quickest fix, no rebuilding required)

This approach leaves your existing Mak's Builder header completely untouched and simply adds the label on top of it.

Step 1: In your WordPress Dashboard, go to:
👉 Divi → Theme Options → Tab: General → scroll to the very bottom → field: Custom CSS

Step 2: Paste this code:

/* Adds 'Select Page' label next to hamburger icon – Theme Builder header */
.et_mobile_nav_menu:before {
  content: 'Select Page';
  font-size: 14px;
  position: absolute !important;
  top: 4px;
  right: 40px;
  color: #000000;
}

Always backup bevor using code & test code in a staging environment instead of live-site bevor

Step 3: Click Save Changes and check your site in mobile view.

The label will appear to the left of the hamburger icon on all screen sizes below 980px.

Note: This code targets the CSS class used by Theme Builder headers (Mak's Builder included). If for any reason the label doesn't appear, try replacing the . with a # at the very beginning of the first line – that targets the classic Divi header instead. Since you're on a Theme Builder template, the version above should be the correct one.

Tweaks you can make directly in that code:

What you want to change What to edit The label text Replace 'Select Page' with anything you like, e.g. 'Menu' Text colour Replace #000000 (black) with your brand colour hex code Text size Change 14px to suit your header Label position Adjust top and right if the placement is slightly off

---

Solution 2 – Native Divi 5 approach (no CSS, more control)

If you'd prefer a fully visual solution without touching CSS, Divi 5 gives you a clean native alternative directly inside the Theme Builder:

1. Go to Divi → Theme Builder and open your Global Header for editing.
2. In the same row as your Menu Module, add a Text Module with the text "Select Page" (or whatever label you prefer).
3. Style it to match your header design.
4. Open that Text Module's settings → Advanced tab → Visibility → set it to show on Phone only (disable Tablet and Desktop).

This way, the label is a proper Divi module – fully editable in the Visual Builder, no code involved, and it only appears on mobile where it belongs.

This approach does require a small layout adjustment inside the header row to position the text and the hamburger icon side by side correctly. If you're not comfortable with that, Solution 1 is the more straightforward path.

---

Should you keep Mak's Builder preset or rebuild from scratch?

For what you're trying to achieve right now – adding a single label – there is absolutely no need to replace or abandon Mak's template. Either solution above works alongside it without any conflict.

If at some point in the future you want deeper control over the mobile menu (animations, slide-in panels, full-screen layouts), Divi 5 natively supports this through its Canvases + Interactions system, which allows you to build a completely custom mobile menu layout directly in the Visual Builder and connect it to the hamburger icon trigger – no third-party plugins required. That's a more advanced topic and not something you need to tackle today, but it's good to know it's there.

---

Start with Solution 1 – it's the fastest and least invasive. If you run into any positioning issues, share a screenshot and we'll sort it out from there.

If there are any DiviUniversity members with easier solutions – please let us know!