The Divi 4 update with the Theme Builder has opened up new design possibilities for Divi’s mobile menu, but with a few simple CSS tricks you can make the hamburger menu even better. We also provide a free header template that you can upload in the Divi Theme Builder. Tested with Divi 4.11.1
Before (Divi default menu)
After (with all six CSS snippets)
Getting started
1. Add text left of the hamburger icon
2. Change collapse icon to X when open
3. Remove the mobile menu top border line
4. Center align mobile menu link items
5. Make the mobile menu full width
6. Make the mobile menu full height
All CSS snippets in one place
BONUS: Download a free header template
We have created a header layout that you can import into the Divi Theme Builder. The layout contains all six enhancements from the article article + a top bar with social media icons and contact information with phone number + email address.
👉 Related post: Create Advanced Mobile Menus With Divi Toolbox
Download the header template
- Enter your e-mail address below to subscribe to our newsletter. (You will never receive duplicate newsletters.)
- Download the zip file containing the header template
- Extract the zip file on your hard drive.
- Import the divimundo-menu-template.json file into the Header area in Divi > Theme Builder.
- Adjust the design and use freely. The CSS code is placed in a Divi Code Module in the layout.The easiest way to find it is by using the Wireframes mode in the Divi Builder.
The newsletter contains tips, guides and offers and is sent out approximately once a week. You can at any time unsubscribe. We will never sell or share your email address. Your email address is stored at Mailchimp.
1. Add text left of the hamburger menu icon
Although the three bars that make up the so-called hamburger menu have been around for a long time, it may be appropriate to clarify that the icon contains a menu that can be expanded.
Please note that the hamburger icon should be right-aligned for the text to appear correctly.
Step by step
- Log in to WordPress and go to Divi > Theme Customizer > Custom CSS
- Paste the following CSS code:
/* Text left of hamburger in Theme Builder */
.et_mobile_nav_menu:before {
content: 'MENU';
position: absolute;
right: 40px;
margin-top:5px;
color: #333;
font-size:16px;
}
/* Text left of hamburger in Divi 3 */
#et_mobile_nav_menu:before {
content: 'MENU';
position: absolute;
right: 33px;
bottom:30px;
color: #333;
font-size:16px;
}
3. You can change the text MENU to anything you want, but keep it short and sweet.
4. Increase or decrease the right:40px value to adjust the spacing between “MENU” and the hamburger icon.
5. Save.
Fix overlapping when displaying search icon and/or cart icon
Are you displaying the search icon and/or the shopping cart icon in the mobile menu? Add this CSS snippet to fix overlapping issues with the “MENU” text. If you use a wide logo and two icons you might want to consider placing the logo in a separate row above the menu, to avoid overlapping or squeezing.
/* Fix overlapping for the Divi Theme Builder */
.et_mobile_nav_menu {
margin-left:50px !important;
}
/* Fix overlapping for the Divi Customizer */
#et_mobile_nav_menu {
margin-left:25px;
}
/* Make mobile search field cover MENU text - change #fff if needed */
@media (max-width: 980px) {
#main-header .et-search-field {
background-color:#fff;
}
}
The result:
2. Change the collapse hamburger icon to X when open
The fact that the hamburger icon, with its three lines, turns into a X when expandning the mobile menu is standard in most WordPress themes and apps, but – oddly enough – not in Divi. Fortunately, only a couple of lines of CSS are required to fix this and improve the user experience (UX) for your website visitors.
Step by step
- Log in to WordPress and go to Divi > Theme Customizer > Custom CSS
- Paste the following CSS code:
/* X icon in expanded mobile menu */
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
}
3. Save.
Bonus: Change the close (X) icon color
Add this little CSS snippet to change the color of close icon.
/* Change X icon color - change #000 to your desired color */
.mobile_nav.opened .mobile_menu_bar:before {
color: #000;
}
The result:
3. Remove the mobile menu top border line
The blue line at the top of the mobile menu is a clear hint that your website is made with But if you don’t want your menu to look like Divi. But if you don’t want your mobile menu to resemble everyone else’s, you can remove this line.
Step by step in Divi 3
- Log in to WordPress and go to Divi > Theme Customizer > Custom CSS
- Paste the following CSS code:
/* Remove the top line in the mobile menu*/
.et_mobile_menu {
border-top:0;
}
2. Save.
Step by step in Divi 4
The CSS snippet above will do the job perfect also with Divi 4 headers created in the Theme Builder. But if you prefer to use the Divi Builder instead of adding custom CSS, that’s possible in the Theme Builder.
- Open the Theme Builder
- Open your Header Template
- Click the cogwheel to edit the Menu Module
- Go to the tab Design > Dropdown Menu and change Dropdown Menu Line Color to rgba(0,0,0,0)
- Save.
This will give the line zero opacity, thus making it invisible.
The result:
The top line has a tendency to overlap the mobile menu when using the Theme Builder. By hiding the line, you don’t have to worry about that.
4. Center align mobile menu link items
Brief lines of text tends to look better when being center-aligned on mobile devices. It is not possible to center-align the mobile menu links with the Divi Builder or the Theme Customizer settings, but a couple of lines of CSS will solve the problem – both in Divi 3 and Divi 4.
Step by step
- Log in to WordPress and go to Divi > Theme Customizer > Custom CSS
- Paste the following CSS code:
/* Center-align moble menu items */
.et_mobile_menu li {
text-align:center !important;
}
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0 !important;
}
2. Save.
The result:
5. Make the mobile menu full width
This is a tweak that I recommend everyone to implement: Let the mobile menu fill 100% of the device width instead of hanging down like a strip.
Step by step
- Log in to WordPress and go to Divi > Theme Customizer > Custom CSS
- Paste the following CSS code:
/* Make mobile menu fullwidth */
.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}
2. Save.
A fix if the full width mobile menu is not center-aligned
The CSS snippet above works flawless if you use the default Divi header or if you use the Theme Builder header with the default 80% width in the row that contains the menu module.
However, if you use the Theme Builder and change the width of the row containing the menu, the margin-left value needs to be adjusted accordingly.
If you for example use a 90% row width, yo can use this snippet instead:
/* Make mobile menu fullwidth with 90% row width */
.et_mobile_menu {
min-width: 100vw;
margin-left: -5vw;
}
If you use custom padding in the row that contains the menu module or if you use padding or margin in the menu module, you might need to to tweak the margin-left value further. Share your link in the comments below if you get stuck and I’ll see what I can do.
The result:
6. Make the mobile menu full height
👉 Update: To avoid a delay when closing the mobile menu, I’ve added an extra snippet that removes the collapse animation.
Once you have the fullwidth mobile menu in place, the next step is logical: To let the mobile menu fill in the entire height of the mobile screen. We will also add some padding (50px) to the top.
Step by step
- Log in to WordPress and go to Divi > Theme Customizer > Custom CSS
- Paste the following CSS code:
/* Make the mobile menu full height */
.et_mobile_menu {
min-height:100vh !important;
min-height: -webkit-fill-available;
padding-top:50px !important;
}
html {
height: -webkit-fill-available;
}
/* Remove the animation to avoid delay */
.mobile_nav.opened .et_mobile_menu {
display:block !important;
}2. Save.
👉 Code update 2020-06-02: I added height: -webkit-fill-available to fix a well-known bug related to full viewport height design in mobile devices. Cheers to Mat Smith for sharing this fix!
The result:
We use min-height instead of the absolute height to avoid content from being cropped out from the mobile menu.
All CSS snippets in one place
Step by step
- Log in to WordPress and go to Divi > Theme Customizer > Custom CSS
- Paste the following CSS code:
/* Text left of hamburger in the Theme Builder */
.et_mobile_nav_menu:before {
content: 'MENU';
position: absolute;
right: 40px;
margin-top:5px;
color: #333;
font-size:16px;
}
/* Text left of hamburger in Divi 3 */
#et_mobile_nav_menu:before {
content: 'MENU';
position: absolute;
right: 33px;
bottom:30px;
color: #333;
font-size:16px;
}
/* X icon in expanded mobile menu */
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
}
/* Remove the top line in the mobile menu*/
.et_mobile_menu {
border-top:0;
}
/* Center-align moble menu items */
.et_mobile_menu li {
text-align:center !important;
}
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0 !important;
}
/* Make mobile menu fullwidth */
.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}
/* Make the mobile menu full height */
.et_mobile_menu {
min-height:100vh !important;
min-height: -webkit-fill-available;
padding-top:50px !important;
}
html {
height: -webkit-fill-available;
}
/* Remove the animation to avoid delay */
.mobile_nav.opened .et_mobile_menu {
display:block !important;
}
2. Save.
The result:
Did you know that mobile internet traffic surpassed internet traffic from desktop computers back in 2016?
Next Step: Create Advanced Mobile Menus With Divi Toolbox 🔥
Are you ready for more advanced features for your Divi mobile menu? Here’s a brand new tutorial on how to:
- Collapse nested mobile menu submenus
- Choose from 20+ beautiful mobile menu animations
- Choose from 9 hamburger icon animations
- Add any content you like in the mobile menu (using the Divi library layouts, shortcodes or widgets)
- Set custom mobile menu breakpoint
- Use a custom menu logo on mobile
- Use fixed mobile menus
- Change mobile browser theme color
… and much more.
Hi Victor,
Is there an easy way to make the MENU text clickable to open the menu?
Thanks,
Vic
Hi Vic (nice name by the way)!
That’s a good idea. I did some testing but I couldn’t come up with a solid solution. But if I solve it, I’ll add it it to this post and ping you.
How to increase the menu font and change background color on the mobile view
Hi Augstine! If you use the Divi default menu, just go to Divi > Theme Customizer > Mobile Styles > Mobile Menu. Here you can choose your Text Color and Background Color.
If you use the Theme Builder to create a global header, you can just use the background and font settings under the Design tab in the Divi builder when creating the menu.
I hope that answers your question!
Thanks! This is awesome. Question: is there a way to make the transition quicker when closing the menu (hitting the ‘x’). It seems to have a .5 second delay.
Thanks for the feedback Ken! It seems to be the “min-height:100vh” that’s causing the delay. Using “height” instead of “min-height” could reduce the delay, but that could also cause cropping of more extensive menus. So the best fix is probably to remove the height setting altogether.
I have tried to insert the CSS code to change the collapse icon to X when open.
Instead it shows other icon
I checked your website (nice work by the way!) and I see the X icon in both Safari and Chrome on my iPhone. Maybe it was a cache issue?
all features are greet man . but 1 things can be make its 100% .
Please add transition because when full mobile menu open and i click cancel its behave like statue
Thanks for the feedback Ayaan. I understand what effect you are referring to. The only way I’ve found to remove the delayed transition is to remove the full height snippet:
.et_mobile_menu {min-height:100vh !important;
}
However, I will update this post and ping you if I find a way to make the mobile menu full height without adding the extra delay when closing it.
Hi Victor!
First of all thank you for sharing this awesome header.
I think what Ayaan meant is when clicking the hamburger menu in mobile view, the menu items pop up with no transition (like in the default divi menu after clicking, the items “scroll down” smoothly) Is there any way to change this? I’m thinking some kind of “-webkit-transition” but im a total css noob.
Cheers
Thanks Mate! I see what you are looking for and it sure sounds like a nice design addition to the Divi mobile menu.
I messy way of achieving this would be to set separate css classes to each menu object, and add animations with a slightly increased delay for each menu object, for example animation-delay: 100ms; for menu object number 2, animation-delay: 200ms; for menu object number 3 etc. And finally add media queries to avoid the effect on the desktop menu.
But that would be a hassle each time you want to add a new menu object.
A plugin like “Divi Mobile” from Divi Engine might be a better option. I haven’t tried it my self but it seems to have some animation effects (and much more). Check it out at: https://www.youtube.com/watch?v=HjxeW2SN1Hc
Hi Ayaan! I’ve updated the post with a new snippet that removes the lag when you close the full height mobile menu now. Check it out! 👉
Thank you four this. These seemingly simple changes make the menu look so much better.
That’s nice to hear Brett! 👉
Thank you for the great tutorial! Is there any way to change the hamburger icon and x to black and keep the new icon from overlapping with the search icon?
Thanks Lukas! Try to play around with the CSS snippets below. Adjust the color and the margin to fit your design. And why not update to the latest Divi version (3.7) and use the new responsive features to see how it looks in different mobile sizes? I’m lovin’ it! 🙂
/* Change X icon color - change #000 if needed*/.mobile_nav.opened .mobile_menu_bar:before {
color: #000;
}
/* Move mobile search icon to the left - change 55px if needed */
@media (max-width: 980px) {
#et_top_search {
margin-right:55px;
}
}
/* Make mobile search field cover MENU text - change #fff if needed */
@media (max-width: 980px) {
#main-header .et-search-field {
background-color:#fff;
}
}
All the codes that you have provided worked like a charm on the newest version of Divi! Just wanted to say thank you for your time and effort.
Thanks Parham, that’s nice to hear! 👉
Thanks! Just what I wanted!
Nice to hear Wayne! 👉
Great great post, love the way the logo are in the mobilemenu!
Thanks Jesper! 👉
Great post, just a question, I use sub category or more, how can I change your code to only display the level 1 and clic to open sub category ?
Thanks
Thanks oxo! If you are looking for a nested collapsing mobile menu design, this can be achieved either with plugins like Divi Toolbox and Divi MadMenu or with custom code. Check this out: https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder
But beware, the CSS snippets in this post were made for a non-nested menu, so test carefully for possible design conflicts if you combine them.
I cannot work out how to import the .json file into the Global Header. Am I looking to do this in the wrong place?
Hi Glen! Try this:
1. Go to Divi > Theme Builder
2. Click “Add Global Header” (or click the pen icon if you already have one)
3. Click the purple ball with the three dots to open the Visual Builder menu
4. Click the arrow up/arrow down icon for Portability
5. Click “Import”
6. Upload the .json file.
7. Edit, save and exit.
8. Click “Save changes” in the Theme builder dashboard (if needed)
Let me know if it works out!
Hi,
Great solution, would love an option to 100% cover the page, but still make the menu icon, logo and cart icon visible.
Any idea how to do that? Also, the -10vw gives a margin on the right side for me, making it not fully cover the page.
Thanks Ernst! The hamburger icon, logo and cart icon should still be visible if you use the snippets from this post (but you will probably need to fine tune the positioning of the search icon and the cart). Have you changed the z-index?
Do you have a link to the website so that I can have a look at the margin? It can differ in some cases depending on how the menu is built.
Excellent content! Very simple tips.
Another “issue” that could be useful to solve on mobile is to show the menu items already expanded, any clue about this?
Regards!
Thanks Eduardo! I see what you are going for but I don’t have a solution for that right now. Maybe a niche plugin like Divi MadMenu or Divi Mobile can do the trick?
Hi! I’m wondering how to make it full height only displaying the menu items and X, if you don’t want to have the logo etc, when fully open, i mean only the menu links and the x displaying!
I’m also wondering how you change font and size, remove the lines between the links and adjusting heights in the menu.
Thank you! Sorry for the long question.. I’m learning!
Hi Kalle! No problem, it’s always nice to hear from a fellow Swede! 😉
There’s no pretty solution for hiding the logo when the mobile menu is expanded, but you can try this quick and dirty css hack:
.mobile_menu_bar {z-index: 9999;
}
.et_mobile_menu {
margin-top:-60px;
}
This works when I tested it on the demo menu (made with the Theme Builder) at: https://divimundo.com/demo-a-better-divi-mobile-menu/
Play around with the -60px value to nudge the mobile menu above the logo.
Font size, line color (set it to transparent to hide the lines) and padding can be set in the menu module settings when you edit the header in the Theme Builder. I recommend that you use the Theme Builder and not the old school Theme Customizer menu since the latter has limited settings. Here’s a neat overview: https://www.elegantthemes.com/blog/divi-resources/an-overview-on-divi-header-types-tutorials-freebies
Tack för kaffet! “Thank you for the coffee” That function was really nice! But I have some trubles.. It’s the X that gets hidden and doesn’t shows up when the mobile menu is open in full screen.. Do you know any dirty hack that laser cuts the X through the menu or something when activated? 👉👉
Big thanks for the other information as well!
Try replacing the code above with:
.mobile_menu_bar {z-index: 99999 !important;
}
.et_mobile_menu {
margin-top:-60px;
}
Does that work better? Skål!
Yes smooth like butter! 👉 Pleased! Thank you! Have a nice helg kung!!
Thank you very much! You are very clever! You saved me! : )
Thanks Berci, I’m glad to hear that! 👉
Great! Many thanks from Italy!!!
Cheers from Sweden! 🙂
Hi 🙂
I have two questions, the tag menu can be clickable as hamburger menu as well? Because otherwise can be that people are clicking “menu” but is not showing as long as you are not clicking the hamburger menu.
Second question is about “5. Make the mobile menu full width”. My menu on mobile I putted in the middle of a row made from 3 column. If I add that code, menu is going on right (side blank of screen) is it any way to make it full width with the hamburger menu in the middle of 3 column?
thanks a lot.
Hi Fil! Good questions! You can use this code to place a clickable “Menu” text AFTER the hamburger icon: https://divinotes.com/adding-text-side-divi-mobile-hamburger/
I played around a while to put the menu text to the left of the hamburger icon and still make it clickable, but I fell short since it messes up the actual hamburger icon. I think you can achieve this effect with the plugins Divi Toolbox or Divi Mobile though.
Regarding question #2, the full width code works regardless of how many columns you use. However, changing the row width and/or the row padding in the Theme Builder header layout can move the menu out of line. Play around with the 100vw and -10vw values in the CSS to nudge it right, or post a link in the comments and I can have a look.
I’m sorry that I could’t help you all the way.
Thanks for the great tutorial. As someone who can barely write or read code it was really easy to follow and implement on my site. I played around with some of the settings to create a fullscreen dropdown menu on both desktop and mobile.
Currently, the menu text is centered at the top, but I would like it to be centered in the middle of the page. Is there an easy way to do this for all devices? I have been playing around with some settings, but can’t seem to get it to work.
Thanks in advance 🙂
Thanks Jorg! It’s often a bit tricky to make elements horizontally centered. Could you share a link? Of not, you could try some CSS from this list: https://www.w3schools.com/css/css_align.asp
Oh, I entered the website URL on my initial comment, but here you go: https://zerotolaunch.nl.
Try this CSS:
.et_mobile_menu {
display: inline-flex;
flex-direction: column;
justify-content: center;
position: fixed;
margin: 0;
min-width: 100vw;
}
Try to add !important if it doesn’t work.
Thanks a lot for your response. Much appreciated! Your snippet of code is definitely a step in the right direction 🙂
Only issue I’m running into now is the menu already being open when you land on the page… Plus I guess it puts the first word of the menu in the middle which doesn’t look too bad on desktop, but looks kind of weird on mobile as the screen is longer.
Great Content!
Is there any way to disable scrolling when the mobile menu is open?
Thanks for all.
Thanks Makin! That’s a tricky one. You can use the plugin Divi Toolbox to achieve this. If you don’t want to use a plugin, you might find some clues here: https://stackoverflow.com/questions/49212250/prevent-scroll-when-open-menu
There’s a 1 second delay when I close the mobile menu. Any idea how to make the menu close instantly?
Hi Brian,
The delay is a consequence of the min-height css. I haven’t found a way to get rid of the lag when using the full-height layout, so my only solution is to remove the height related CSS from the mobile menu. Sorry, but that’s my best answer at the moment.
Hi Bryan! I’ve updated the post with a new snippet that removes the lag when you close the full height mobile menu now. Check it out! 👉
Thanks Victor very helpful, bravo! can you put a separator line between the various menu items, perhaps centered?
Thanks Davide! Sure, play around with this CSS in the Theme Customizer:
.et_mobile_menu li a {
border-bottom-color:#666;
border-bottom-width:2px;
}
If you want to reduce the width of the line and make it center aligned, you can try to add:
.et_mobile_menu li a {
width:70%;
margin:auto;
}
But be careful, since the 70% width could crop long link texts in the menu.
Thanks very kind, it worked
Victor you are always very kind, can you tell me what to add to have a border around the menu always from mobile? then color and px change thanks
Hi Davide! I’m not sure if I grasp what you are looking for, but you could try to play around with this CSS:
.et_mobile_menu {border: solid 3px #333;
}
You could also try to play around with the border settings in the Theme Builder.
thanks a lot
Hi, can you do something to make it open slower? Thank you very much
It seems like the mobile menu animation is fired by jQuery so I’m afraid that I don’t have an easy solution for that. If I find a way, I’ll let you know.
Hello,
Awesome tutorial ! But here is my problem :
My menu has too many items and has no overflow, so the user cannot see the entire menu.
Can you give me a CSS code that allows user to scroll into the menu please ?
Thanks !
Thanks Baptiste! One solution is to create a collapsing nested mobile menu with the Theme Builder. That could take away the need for scrolling. See: https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder
But if you want to enable scrolling, you can try this snippet:
.et_mobile_menu {overflow: scroll !important;
}
You might also need to finetune the height, depending on the height of your menu bar with this snippet:
.et_mobile_menu {min-height:84vh !important;
}
Change 84vh to a height that fits your design.
any advice on how to make the menu collapsible?
tia
Hi Nordie! Sure, you can create a collapsing nested mobile menu with custom code: https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=40598&&url=61078
Or you can use a plugin like Divi Toolbox: https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=40598&url=67353
Thank you so much. The best working, fastest-to-use solution ever. I love it.
Do you see a possibilty to combine this great solution with a header swap/transparent header realised with divi sticky options?
See here and use mobile nav in default and in sticky stadium, than you propably understand my problem:
http://s889479038.online.de/
Hi Michael! Do you want the mobile menu to be transparent first and then have a white background on scroll? You could play around with this snippet:
@media all and (max-width: 980px) {.et_pb_row_0_tb_header {
background-color: RGBA(255,255,255,0) !important;
}
}
You might need to tweak the padding/margin a bit if you use this snippet.
That works fine. But if I open the mobile menu in default transparent stadium, the header stays transparent, but the menue is white. I also would like to have the header white when opened 😉
It might be possible to achieve this but I would need login to the site and an hour or so to investigate. You could play around with some negative margin for the mobile menu and increase the z-index for the collapse icon. However, it’s a delicate task to separate the top menu and the sticky menu styling.
I understand, thank you. I will continue taking the compromise having a white mobile header as default too, abstain from transparency on mobile but having your beautiful fullscreen menu instead.
Thank you very much.
Ciao Victor, metti pagamento caffè anche con paypall
Ciao! Buymeacoffee.com has ended its’ partnership with PayPal. 👉 They rely on Stripe now. Check out https://medium.com/illumination/why-has-paypal-ended-its-partnership-with-buy-me-a-coffee-785b437a267d
a I’m sorry, I wanted to offer you a coffee because you are really nice, but I do not enter the card details. if you give me an iban, I’ll give it to you if you want
Thanks Davide, that’s very kind of you. Feel free to subscribe to my YouTube channel at https://www.youtube.com/c/divimundo and spread the word. That’s worth a whole bucket of coffee for me. 👉
Victor davvero, dammi il tuo iban
Dear Victor,
there are the possibility to have this menu also in the desktop version?
thank you!
Hi Elia! Sure, play around with the snippets in this post: https://www.peeayecreative.com/how-to-show-a-divi-hamburger-menu-on-desktop/
Just wanted to say thank you Victor. This is a really classy mobile menu!
Thank you Claire, that’s a really classy comment as well. 👉
Hi there,
Great template – but i have one question.
In desktop can i get the header fixed and stay at the top while scrolling down?
Regards Lasse (from Denmark) 🙂
Mange takk Lasse! Sure, just go to the section settings in the Theme Builder and go to Advanced » Scroll Effects » Sticky Position and choose Stick to Top. You can make both sections sticky or just one of them. You’ll probably need to clear your cache and static CSS files after for it to take effect. Let me know how it goes!
Cheers from a neighbour in Malmö!
Hi Victor! Great tutorial 🙂
Is the any possibilyty to change “MENU” color when i use sticky option?
In my case first the header section is white, and when i scroll down color change to black, and the idea is to change “MENU” color to white.
Thanks Michal! Sure, if you use the Theme Builder to create your header, you can add this CSS snippet in the Theme Customizer:
.has_et_pb_sticky .et_mobile_nav_menu:before {color:#fff;
}
It might not display correctly when you preview it in the Theme Customizer but if you try it logged out or in a different device, it should work fine. Let me know how it goes!
hey when uploading the file it shows an error
Hi Julian! I just tested to import it with the latest versions of Divi and WordPress and it works fine. Make sure that you extract the zip file first. Then go to Divi » Theme Builder. Click “Add global header” (or edit an existing header template). Click the purple circle in the bottom to open the Divi Builder menu and click the Portability icon (↓↑ ). Click “Import” and upload the .json file. Let me know how it goes
Heyhey,
Is it possible to make the menu full color so the navigation bar also has a color?
Are you looking for something like this: https://divicrib.com? If so, you can check out this tutorial: https://www.youtube.com/watch?v=8LCnT-xrr6M&t=6004s
Hi Victor your tutorial is really great help! Congratuations.
However¨I have difficulties to make the menu opened in the middle of the phone screen.
As my header is splited with 2 columns, the navigation menu being in the second column, when the menu is opened, it is only in teh space made for second column…
Not sure you can understand what I mean. Here is an image.
https://revolving-lights.com/capture01.jpg
Thanks anyway!
Sorry for a late reply! I checked out your site and it seems like you already found a solution that works? Using two columns makes it a bit more tricky.
Is there anyway to put the secondary menu at the top of the page in mobile? The example above has the top bar showing but it isn’t coming up on my site. I added css and it just added the menu to the bottom of the primary menu. Thank you.
Hi Angela! The demo header is made with the Theme Builder so it doesn’t use the old Theme Customizer secondary menu. I would recommend using the Theme Builder since the Theme Customizer is deprecated in Divi.
Here’s a tutorial on how to create a menu with a top bar with the Divi Theme Builder:
Step 1. Dekstop menu: https://divimundo.com/wordpress-tutorial-for-beginners/create-sticky-header-in-divi/
Step 2. Mobile menu: https://divimundo.com/wordpress-tutorial-for-beginners/style-the-mobile-menu-in-divi/
Hey, Viktor! I am currently using the function of full width menu on mobile (the one that covers the top bar). I have a problem that i want to get my text a bit down, but cant do that with css. Is there a chance you can help me?
Hi Ri!
If you want to push down the menu links, you can try to add this CSS:
.et_mobile_menu {padding-top:200px;
}
If it doesn’t work, try:
.et_mobile_menu {padding-top:200px !important;
}
Just change the 200px value to increase or decrease the spacing.
Hello, again Victor! Thanks a lot for answering me 🙂 It is still not pushing it down 🙁
I can have a look at it if you share the link.
Hello again! Sorry I thought that it got shared as it was asking to put it in the form together with the comment. This is the site: https://needyoureyes.studio/works/
Problem solved! 🙂 Add this snippet and adjust the number of pixels:
.et_mobile_menu .et_first_mobile_item {padding-top:200px;
}
Thank you so much 🙂
Hello ! since I changed the CSS code (following the tutorial), my mobile menu is now in the background. As a result, the links go below the content below.
So I removed the code and it still does the same thing…
How to make it normal again (menu in the foreground) while keeping the code you provided?
It is quite urgent…
Thanks to you.
Hi Emma,
Maybe you have a plugin or other custom CSS that conflicts with this CSS. If you see the same thing after removing the snippet, you might need to clear your website and browser cache. There are never any permanent changes left if you remove a CSS snippet in WordPress.
Hi Victor,
Your post was very helpful, just wanted to leave a Thank You!
Kind regards,
Thanks Lindi, that’s nice to hear. Good luck with your Divi projects! 🙂
Thank you very much.
You’re very welcome Amber! 🙂
Hi Victor,
Thank you for this material.
The only thing I need to fix is that the auto-scroll function (in the menu) doesn’t seem to see the height of the fixed menu on mobile and the auto-scroll target is now hidden behind the menu. I’ve been trying to add the following CSS but unfortunately, it doesn’t make any difference. The issue is only on mobile, do you know how I can add some padding on the auto-scroll to fix this on mobile ?
html {
scroll-padding-top: 300px;
}
The custom CSS I have so far is this:
/*Scroll padding top*/
html {
scroll-padding-top: 300px;
}
.et_pb_gallery_item img {
position: absolute;
height: 120%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
.et_pb_gallery_image {
padding-top: 100%;
}
@media only screen and (max-width: 980px) {
#logo {
height: 75% !important;
max-height: 75% !important;
width: auto;
max-width: 100% !important;
}
}
/*Hide desktop menu on mobile*/
@media only screen and (max-width: 981px) {
.desktop-menu-item { display: none; }
}
/*Hide mobile menu on desktop*/
/*https://divibooster.com/hiding-menu-item-from-the-mobile-menu/*/
@media only screen and (min-width: 981px) {
.mobile-menu-item { display: none; }
}
/* Hide element on Desktop */
/*https://techprimeweb.com/how-to-display-and-or-hide-menu-items-on-desktop-or-mobile-devices/*/
@media only screen and (min-width: 981px) {
.hide-on-desktop {
display: none !important; }
}
/*https://www.youtube.com/watch?v=Baesu86nCqk&t=9s*/
/* Set the Divi Mobile Nav to Fixed on scroll */
@media (max-width: 980px) {
.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
position: fixed;
}
}
.et_mobile_menu {
overflow: scroll !important;
max-height: 83vh;
}
/* Add the word MENU after the mobile nav hamburger icon */
/*.mobile_menu_bar:after {*/
/* content: ‘MENU’;*/
/* bottom: 10px;*/
/* left: 10%;*/
/* position: relative !important;*/
/* color: #FFF;*/
/*}*/
/* Change the hamburger icon to an X when opened */
/*.mobile_nav.opened .mobile_menu_bar:before { */
/* content: ‘\4d’; */
/*}*/