Tired of the boring old hamburger icon on your mobile menu? Here is an easy way to turn your Hamburger icon into a button with text.
You can see it in action on here
Demo
The Magic of CSS
Now lets start to dazzle things up a bit with some CSS.
If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)
If you want the menu button with text and the hamburger icon, add this CSS.
/*------------------------------------------------*/
/*---------[GQ - MOBILE MENU BUTTON 1]------------*/
/*------------------------------------------------*/
.mobile_menu_bar:before {
background-color: #3e4555;
padding: 2px 0px 2px 2px;
top: 9px;
color: #fff!important;}
.mobile_menu_bar::after {
font-family: Arial;
content: "MENU";
position: relative;
padding: 10px 20px 10px 5px;
background-color: #3e4555;
color: #FFFFFF!important;
cursor: pointer;}
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";}
If you want the menu button with text and no hamburger icon, add this CSS.
/*------------------------------------------------*/
/*---------[GQ - MOBILE MENU BUTTON 2]------------*/
/*------------------------------------------------*/
.mobile_menu_bar:before {
display:none}
.mobile_menu_bar::after {
font-family: Arial;
content: "MENU";
position: relative;
padding: 10px 20px 10px 20px;
background-color: #3e4555;
color: #FFFFFF!important;
cursor: pointer;}
.mobile_nav.opened .mobile_menu_bar:after {
content: "CLOSE";}
You can make the button larger and smaller by adjusting the padding. You can also change the text to whatever you want by changing the “content”.
And that’s it! Have fun!
Credit to SJ James for showing us how change the icon to an x when it is open over at Divi.Space.
Well that’s all for now. I hope you find this article useful.
I want to say thank you Geno specially for your helpful tutorials and your commitment for Divi community in general. keep it 🙂
Thanks Joseph
Thank you, Geno! Really helpful tip.
Igor
Hi Geno
Love this one – can’t wait to add it to my sites.
Thanks for adding more than a little magic to that plain ordinary CSS.
Thanks for all that you do. Could you provide CSS to do the same thing for the new header/navigation option where there is a hamburger for desktop as well in Divi? It would be great to have your menu button for their new mobile nav on desktop as well.
This should do it
/*Menu - Show Mobile Menu instead of full menu on all sizes*/ #et_mobile_nav_menu {display:block;margin-bottom:20px; margin-top:6px } #top-menu-nav { display:none; }Is there anyway to have this as an option on desktop while having one or two other nav beside it instead of as subcategories? I want to have a link for “Products” and “More with the hamburger icon and functioning”
Yes but it will take some tweaking. What I would do is Use three items for your main nav. One for “Products” and then the “More” nav item with all the other pages as a submenu. Then you can use css to give it a solid background and use Font Awesome to add the Hamburger Icon before the word More. This tut will show you how to convert the menu item to a button: https://quiroz.co/transform-a-divi-menu-item-into-a-cta/ and this tut will show you how to add Font Awesome Icons: https://quiroz.co/adding-extra-fields-and-icons-to-the-top-header/. And I strongly recommend putting any css you use for this in a media query for desktops so that it does not mess the code used for this tut.
/* Desktops */ @media only screen and (min-width : 981px) {}Thank you for this! I tried implement this code but I have my hamburger on the left. If you do not mind taking a look. It did something funny. Any suggestions would be appreciated.
.mobile_menu_bar:before {
font-family: Arial;
content: “MENU”;
background-color: #3e4555;
padding: 2px 0px 2px 2px;
top: 9px;
color: #fff!important;}
.mobile_menu_bar::after {
font-family: Arial;
content: “MENU”;
position: relative;
padding: 10px 20px 10px 5px;
background-color: #3e4555;
color: #FFFFFF!important;
cursor: pointer;}
.mobile_nav.opened .mobile_menu_bar:before {
content: “\4d”;}
The code looks right. This code was written for the standard Divi Menu so if you are using a plugin that modifies the menu button or are using the side navigation, it might be the culprit.
I like it you can click on the word menu to open up too… thought i needed some JS to do that
Yeah its simpler than I had originally thought too 🙂
As always excelent!! 🙂
Thanks
Geno, works a treat when using the default header style but when using the centered inline logo option the new menu button appears as well as the other “select page” bar…
Yeah the css is very different for the centered header. I would have to some up with a different tutorial.
Hi Geno–Very cool.
I cannot get it to work on sites where I have I have the header centered (that is where I have selected header style centered in the theme customizer) . When the centered option is in effect, I get a long bar that says “Select page” on the right side and has a hamburger menu on the left . I find that users try to click on the place where it says “Select page” and it does nothing–only the hamburger is active. When I use your CSS magic, the hamburger changes, but the confusing “Select page” bar is still there. I have tried looking at the php, to see if there is some HTML that I could remove–but I am not finding it.
Maybe this is the part that isn’t simple.
Any help much appreciated!
Yeah the css is very different for the centered header. I would have to some up with a different tutorial.
As i suspected. Thanks for all you do Geno!
add this to your css to hide the select page text. I would ideally have it so it’s centered inline for desktop and default header for mobile but not sure I can come up with that CSS!
.mobile_nav .select_page {
display: none!important;
}
.et_header_style_split #main-header .mobile_nav {
background-color: #fff!important;
}
Hi Geno,
thank you so much for your tutorials, they really are incredibly helpful!!!
I have one question about changing the Hamburger Icons to Menu buttons, is there any way to do this just for the primary/secondary menu rather than for both?
Thanks so much again!!
You can target the primary menu by adding #main-header before the .mobile_menu_bar
/*------------------------------------------------*/ /*---------[GQ - MOBILE MENU BUTTON 1]------------*/ /*------------------------------------------------*/ #main-header .mobile_menu_bar:before { background-color: #3e4555; padding: 2px 0px 2px 2px; top: 9px; color: #fff!important;} #main-header .mobile_menu_bar::after { font-family: Arial; content: "MENU"; position: relative; padding: 10px 20px 10px 5px; background-color: #3e4555; color: #FFFFFF!important; cursor: pointer;} #main-header .mobile_nav.opened .mobile_menu_bar:before { content: "\4d";}Hi Geno! First, thank you for this awersome tutorials! i’m a no good at CSS and you just help me making my site way better!
that said, i have a problem with this menù button. It appears half in the menù bar and half underneath the fullwith header. any thoughts on that? thank you very much!
Matteo
Not sure. Each site is different but try adjusting the “margins” in the css. You can even use negative margins.
This works for normal standard Divi menu. Unfortunately, doesn’t work with the recent “slide-in” navigation menu option. The background and hamburger menu icon colors can be changed – but the addition of the content: “Menu”; messes up the hamburger menu – not sure why though.
This happens a lot when combining multiple effects on a particular item. It might be possible to merge these two, but it would take some time to work out the code necessary to do so.
Thanks for the reply Jerry. I actually decided to disable the slide-in feature option, and just manually create the slide-in .. that way I could have that “menu” text next to the hamburger icon using the default menu option. It works well anyways 🙂
Awesome! That is good to know. Thanks for sharing!
Hi, with the later DIVI update, the location to find the ePanel is now gone.
Instead you can paste it into; Divi > Theme Options > General and scroll down to Custom CSS.
Thanks for fixing a flaw as non computer people have no idea of the Hamburger menu (especially elderly people).
There is a slight issue with the way the size of the menu button background is bigger than the hamburger menu, but I should be able to adjust your CSS to fix that I hope.
Thanks again.
Hi Kimberly! Thank you for your comments! We do need to update this a bit.
For the difference in the menu button background, you can add this to the CSS…
@media (max-width: 980px) and (min-width: 768px) { .mobile_menu_bar::after { padding-top: 11px; } }You can change the screen sizes and padding to suit your own needs.
Hi can you do to show only the submenus by clicking on the item and these remain fixed on the desktop menu divi?
Because these are only displayed with hover and are not fixed.
Thanks!
Regards
Thanks for reading! I haven’t seen a way to do that in Divi, you might need to find a plugin to have that functionality.
This is an answer to a long period of trial and error on a client site. What would be the code to include both the Main menu and secondary menu?
Hi Sara! I’m not sure I understand what you are asking for… the default in Divi is to include the secondary menu items in the mobile menu. If that is what you want, but it isn’t happening, then you will have to find the CSS used to hide those items from the menu.
Thank you Jerry. Using the code above, the menu is only populating the main menu for me. I have a secondary menu that has additional member login items and items of login display. By chance is there a way to designate another menu? For instance I assign a mobile menu inclusive of all items I want as part of the menu?
I don’t think that you can add an additional menu to the mobile menu. However, if the secondary menu items are not showing up there is probably a line of CSS somewhere that is hiding them. If you’d like to provide a link to your site I can take a quick look to see if I can spot it.
Thank you Jerry for your help. Much appreciated.
That’s awesome! Thank you so much! My only question is, how do you make “MENU” appear to the left of the icon, rather than the right side?
You can do that by adjusting the left margin. You can try using the following code instead. You might need to adjust the -95px according to your own preference.
.mobile_menu_bar:before { background-color: #3e4555; padding: 2px 0px 2px 2px; top: 9px; color: #fff!important;} .mobile_menu_bar::after { font-family: Arial; content: "MENU"; position: relative; padding: 10px 20px 10px 5px; background-color: #3e4555; color: #FFFFFF!important; cursor: pointer; margin-left: -95px; } .mobile_nav.opened .mobile_menu_bar:before { content: "\4d";}Great tutorial. I’m having some problems. Here’s a screenshot of what I’m seeing: https://goo.gl/A6qgLh
Most of the things you are pointing out can be corrected in the theme customizer. Right now your header is set to Centered Inline Logo, you probably want it set back to Default. From WP Admin, choose Appearance, Customize, Header & Navigation, Header Format, and then Header Style.
Thanks for the excellent CSS tips shared on this topic. I’ve successfully followed one which hides “select page” and the header bar it sits on in the mobile phone view. However when the page is resized to tablet size view, it reappears. Any thoughts on a fix to remove the text “select page” and its accompanying header bar from the tablet sized view would be very welcome. Thanks in advance.
Hello Mark! It sounds like you might need to update a media query in your CSS to adjust the max-width value. It’s hard to tell without seeing the site. Post a link if you want us to take a look.
Site is newsmarkprdotcom Many thanks Jerry!
Ok…here is the CSS you have controlling the Select Page bar…
@media only screen and (max-width: 479px) .et_header_style_split #main-header .mobile_nav { background-color: #fff !important; } @media only screen and (max-width: 479px) .mobile_nav .select_page { display: none !important; }That max-width of 479px is the key. If you never want the Select Page and gray bar to appear, then you should set the 479px to 980px.
Many thanks again Jerry. Interestingly I’m now thinking that the “select page” makes sense on the wider tablet screen. So I’ll keep the change only for the phone screen. Really appreciate!
THANK YOU!! This is exactly what I was looking for and it works perfectly.
I would like to be able to keep the toggle feature so that when the menu is open you click an X to close it. How can I do that? Thank you!
I have done it in the past. I just dug up an old snippet. See if this works for you.
.mobile_nav.opened .mobile_menu_bar:before { /* CROSS INSTEAD OF BURGER WHEN THE MENU IS OPEN */ content: "\4d"; }Is this possible to do with the slide in menu? My client wants the hamburger menu more noticeable, but for the life of me can’t get the text to show. The text will only show after I click on it. And the font families seem to clash. Any ideas?
It would require a completely different tutorial. Its on my list 🙂
I am anxiously awaiting this tutorial! I keep trying to figure it out on my own and I am failing hard. 😀
This is great. The only issue that I’m having is when I resize down past Tablet view. So, Desktop looks good when I resize to Tablet (“Menu” comes up), but when I resize to Mobile, the “Hamburger” icon appears.
I just double checked the demo and I could not recreate the issue you are experiencing. Can you share a link so I could see for myself what is happening?
Here you go: https://www.lifeinsuranceblog.net/
Thanks!
It must have been a caching issue. I just checked and it looks great even on mobile phone size. Nice work on the website by the way.
Hi Geno, is there a way to get the mobile hamburger menu to read ‘menu’ on the fullwidth menu module?
Thank you!
Yes there is. In fact I did that on this website. So assign your fullwidth section that contains the module a custom class like blog-fullwidth-menu-section. Then try this css
.blog-fullwidth-menu-section .mobile_menu_bar:before { background-color: #6b2cb5; padding: 4px 0px 3px 2px; top: 6px!important; color: #fff!important;} .blog-fullwidth-menu-section .mobile_menu_bar::after { font-family: Arial; content: "DIVI MENU"; position: relative; padding: 10px 20px 10px 5px; background-color: #6b2cb5; color: #FFFFFF!important; top: -3px; cursor: pointer;} .blog-fullwidth-menu-section .mobile_nav.opened .mobile_menu_bar:before { content: "\4d";} @media only screen and ( max-width: 767px ) { .blog-fullwidth-menu-section .mobile_menu_bar:before { padding: 2px 0px 2px 2px;}}Great stuff as usual Geno! Loved how this made my mobile menu look.
Glad you like it 🙂
Hello , This is not working in my case .. I would like to add Menu + Menu Icon in my menu bar … like this website http://accenture.com/
.mobile_menu_bar:before{
content: ‘MENU’;
top: 0;
left: -50px;
font-size: 20px;
color:red;
font-family: “Trebuchet MS” , Verdana, Helvetica, Sans-Serif !important;
}
but i lost the icon .. Your guidance required . also i want to know is there any way to add one more text before the menu button like the example i give .
Thanks
You need to use the Before and After Pseudo like it is shown in this tutorial.
Hi Geno, Thanks for this, made life a lot easier. Can I ask you one quick question please? Everything is working fine except when my full screen menu is open the ‘x’ has disappeared so it only reads MENU. Here’s a link to my test site http://test.wileydesign.ie/test/
I’d appreciate any help and your time.
Thanks,
Garry
here is the snippet I used:
/*————————————————*/
/*———[GQ – MOBILE MENU BUTTON 1]————*/
/*————————————————*/
.mobile_menu_bar:before {
background-color: #7e1521;
padding: 2px 0px 2px 2px;
top: 9px;
color: #fff!important;}
.mobile_menu_bar::after {
font-family: Arial;
content: “MENU”;
position: relative;
padding: 10px 20px 10px 5px;
background-color: #7e1521;
color: #FFFFFF!important;
cursor: pointer;
margin-left: -95px; }
.mobile_nav.opened .mobile_menu_bar:before {
content: “\4d”;}
Looks like you got this sorted. The site looks great 🙂
Hello again geno and very grateful for you help.
I have a center menu and I change it for burger menu but If I do it my second menu doesn´t appear fix in the top as right now.
Does exist any way to put a burger menu with the second menu always displayed in the top bar?
Many thanks , I´m learning a lot with these tutorials.
Hi Jesus, Unfortunately I have not tried to implement something like that yet so I do not have an answer.
Hello, I have a question, how can I change the color of the hamburger icon on scroll down?
Thank you!
The mobile menu scrolls up with the page so that you can no longer see the mobile menu when you start scrolling down so I am not sure.
Hi Please suggest how can i change the hamburger icon to menu (text) in divi theme slide menu option.
Regards
MK
In the Desktop Version itself
Sorry I have not tried that one yet. I have it marked for a future tutorial.
Hi Geno, love your work.
Do you know of a way we can add social media icons/links before the hamburger (toggle) icon and menu text?
Thanks Eddie. Unfortunately I do not have a quick hack for that.
Hello Geno, this is awesome!
Only issue I have though is when using the option to just have the “menu” box, it makes my menu smaller and thus my logo smaller. Any way to change this?
my website bytheway is cardinalpropainters.net
Looks like you got it resolved. Looks great on my screen.
I think so. Can you give me a link? I would need to tinker with inspect tools to see whats going on.
Hello sir,
How would I use this as just one menu item (on desktop) rather than the whole menu? I assume I would create a class in the menu item, but I didn’t know how to call it in the CSS since I’m only learning yet.
Thank you so much for your contributions to the community!
Hi Nelson. That would take on a different approach and would require a different tutorial. I will keep it in mind.
Hi this a fantastic code, how does it work on all pages of the site, as it only works on homepage
By default it works on all pages. If it is not working on other pages, you might want to make sure there are no Divi Plugins you are using that might be creating the conflict.
Thank you Geno. You the best in this business – you codes always on point. Cheers from Russia
Thank you 🙂
Hi Geno, thanks for the tips.
I need to remove the word menu when the menu is open in full screen, and change the color of the “X”.
Can you help me?
Add this css
.mobile_nav.opened .mobile_menu_bar:before { color: #000!important;} .mobile_nav.opened .mobile_menu_bar:after { display:none;}Hi Geno, love this tutorial but having trouble as menu is showing when its open. Would you mind taking a peek http://capatina.itchyfingersdesign.com/
Client wants the x to position over the menu word when its open.
Thanks in advance.
Using that menu style would require a slightly different approach to the CSS. I will take a look and see if I can put something together.
Super, thanks Geno
Hey Geno, does this work for the full width menu section? iv been trying for over an hour or so but it keeps addint it to the top of the section and the top half of the text keeps getting cut off 🙁
If I recall correctly, it requires slightly different classes.
Hi Geno, when I look at it on an iPad in landscape, your reg. Links show up and the logo overlaps them until you scroll down on your page. Just thought you might want to take a look.
Thanks for point that out. Too many placeholder menu items 😉
Great tutorial! I copied the code exactly, but for some reason on one page once the screen is smaller than 980px the Hamburger and the MENU are not lining up correctly. Sometimes they’re off by a pixel on the top, other times by 1-2 pixels on the top and bottom. i.e. 36px high and 37px high …The home page works fine, but on this page there’s an alignment issue. Any thoughts would be appreciated, thank you! http://www.crosscountrymc.com/funding-programs/
i had the same issue, however just removed the background color CSS so it would blend into the header 😉
I had the same problem as well – Gino any thoughts on what’s causing this?
Hey guys here is the updated code that you can use
.mobile_menu_bar:before { top: 9px; width:35px; } .mobile_menu_bar::after { font-family: Arial; content: "MENU"; position: relative; cursor: pointer; width:60px; } .mobile_nav.opened .mobile_menu_bar:before { content: "\4d"; } .mobile_menu_bar:before , .mobile_menu_bar::after{ background-color: #3e4555; color: #fff!important; display: inline-block; height: 40px !important; line-height:40px !important; }Padding was causing the issue so i just removed it and added same height for bot :before and :after pseudo-elements.
I visited your website you have a good looking website and also i have read this article . I really like it. Lots of good information and found it very interesting and well done Keep it up.
Is there a way to make the button say MENU only, with no Hamburger icon ?
This is awesome, Gino! One quick question… My menu button is being covered half way by the drop down menu when clicked… see this short video demo: http://somup.com/cYVn35fme4
Any idea on how to fix that?
THANKS!
Hi Dawn. I would need to see the actual page & CSS to see what we can modify for your mobile menu.