This post discusses styling the Divi mobile menu to give it a semi-transparent background, to colour the menu and submenu items, give the menu container round corners and change the hamburger to an ‘X’ when the menu is open. We will also show how to ‘fix’ the menu so that it remains visible when the mobile device is scrolled.
You may not want to use the styling we have chosen. That’s fine. The article explains how the styling was done. So, after reading this, you should be able to apply your own styling, to your taste.
In the article, we use a ‘blank’ installation of Divi, with the default logo and Default Heading Style. You may need to change some spacings to suit your website design and logo.
We also assume that you are using the Heading Style of either Default, Centered or Centered Inline Logo. If you use the CSS code here with a different Heading Style, it is unlikely to work without modification.
In the pictures we use to illustrate the effect of the CSS on the Divi mobile menu, those blue vertical lines beneath the left border of the menu are nothing to worry about. As it happens, the example page has some highlighted text on it. Just like this the text below in fact…
We are going to use CSS to style the Divi mobile menu. We recommend using a child theme for this. There are many good articles on the internet about creating child themes. You can, instead, either use a CSS plugin or put your CSS into Divi->Theme Options->Custom CSS.
Heading Styles On Divi Mobile Menu
The first thing to talk about is that, depending on the chosen Heading Style (chosen in the Divi Customizer), you will be using a different mobile layout, with different components. Both the Centered and Centered Inline Logo Heading Style have a shaded background. The Default and Centered styles display the logo. The Default Heading Style adds a Search button. We will talk next about how to deal with these different layouts.
Heading Style
Default
Heading Style
Centered
Heading Style
Centered Inline Logo
Removing Default Components
The mobile header will scroll by default. So, if it is instead ‘fixed’ in place, it might be appropriate to remove some components. It may be better to have a much simpler, less intrusive layout that does not obscure the page content as it scrolls. So, it makes sense then to think about what header elements could be removed. Because we are starting from three different layouts, we will aim for the simplest header possible and remove everything apart from the menu from. Of course, you may choose to do something different.
The mobile header is contained in an object called div.et_menu_container and here is the CSS to remove everything apart from the menu hamburger –
/* switch off the Search button on Default header */
div.et_menu_container span#et_search_icon {
display:none;
}
/* make the enclosing container transparent on Centered and Centered Inline Logo headers */
div.et_menu_container div.mobile_nav {
background-color:transparent !important;
}
/* switch off the Select Page text on Centered and Centered Inline Logo headers */
div.et_menu_container span.select_page {
display:none !important;
}
/* switch off the mobile logo on Default and Centered headers */
div.et_menu_container div.logo_container {
display:none;
}
Try this out now by adding this CSS to your child theme or to a CSS plugin or by adding it to your CSS into Divi->Theme Options->Custom CSS. If this works, the mobile header should contain only the menu hamburger. Like this –
The next thing we would like to deal with is the border beneath the mobile header. in fact, it is quite difficult to work out how this border has been made. It turns out that is is not actually a border at all, but a shadow. This shadow is present on both mobile and desktop. We think a shadow has been used to give a more three dimensional look to the header. In other words, to lift it off of the page and to better separate it from the page content when it scrolls.
We are going to just switch off the shadow on the header and we can do this with the code here. The only slight issue is that the object to be targetted changes depending on the circumstances. The CSS here should switch off the shadow beneath the menu header. In fact, it will do this on the desktop as well. So, if you want to only switch it off on mobile, be sure to wrap this with a media query.
/* this is used when viewport is at top of page */
#main-header {
-webkit-box-shadow:none !important;
-moz-box-shadow:none !important;
box-shadow:none !important;
}
/* this is used when we scroll and have a fixed header */
#main-header.et-fixed-header {
-webkit-box-shadow:none !important;
-moz-box-shadow:none !important;
box-shadow:none !important;
}
Fixing The Mobile Header in Place
Now that the header is as minimal and non-intrusive as possible, we are going to fix it in position, to pin it to the screen. After doing this, whenever you scroll, the header and menu hamburger will stay where they are. In CSS, you do this by setting the position of an object to be fixed. This means that it is stationary, relative to the viewport. The slightly complex thing about doing this for the mobile header is that, depending on the Heading Style used, you need to target slightly different objects. Here is the CSS code that is needed. This should fix the menu, regardless of Heading Style.
.et_non_fixed_nav #main-header, .et_non_fixed_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
position: fixed !important;
}
Styling The Hamburger Icon
Now we are going to style the hamburger itself. It turns out there are actually two objects that contain hamburger icons; one is used when the menu is displayed (open) and the other when it is closed. They are called div.mobile_nav.opened .mobile_menu_bar:before and div.mobile_nav.closed .mobile_menu_bar:before. It is useful that the hamburger is split like this because it allows us to use different icons depending on the state of the menu. We are going to display an ‘X’ when the menu is open and the default hamburger icon when closed. Clicking on the ‘X’ will close the menu.
Here is the code that makes the hamburger icon an ‘X’ when the mobile menu is open.
We use a character from the ETmodules font. ETmodules is an icon font that is built into Divi. Icon fonts contain icons, not letters. Divi uses this icon font a lot. For example, for the blurb module icons. You can find a table showing all of the characters in this icon font in the Elegant Themes website.
/* style the opened mobile menu hamburger (make it an 'X') */
div.mobile_nav.opened .mobile_menu_bar:before {
font-family: "ETmodules";
content: "\4d";
}
By setting the content of div.mobile_nav.opened .mobile_menu_bar:before to “\4d”, we are changing the character used as the hambuger to an ‘X’. Take a look at the table in the ET website to confirm this.
While we are styling the hamburger, let’s change its colour as well. We will use is #e9b000, a gold/orange colour. The value used for color needs to be either one of the many colours predefined in CSS (red, yellow etc.) or the RGB value of the colour, written as a triple-digit HEX number. You can easily get this from Photoshop or from most colour tables on the internet.
/* color both the open and close hamburgers */
div.mobile_nav.opened .mobile_menu_bar:before, div.mobile_nav.closed .mobile_menu_bar:before {
color: #e9b000;
}
If you want to use different colours for open and closed hamburger icons, you would just have to split this CSS into two pieces of code to target each hamburger separately like this –
div.mobile_nav.opened .mobile_menu_bar:before {
color: red;
}
div.mobile_nav.closed .mobile_menu_bar:before {
color:yellow;
}
Lastly, we might want to make the hamburger a little bigger. It needs to stand out against whatever the background happens to be, when it is scrolled. We already know how to target the hamburger icon, and, because it is an icon font, we can change the size by simply adjusting its font-size. You might want to use a different value, depending on your design. Our code for styling the hamburgers should now look something like this –
/* color and size both the open and close hamburgers */
div.mobile_nav.opened .mobile_menu_bar:before, div.mobile_nav.closed .mobile_menu_bar:before {
color: #e9b000;
font-size:60px !important;
}
If you have followed all of this so far, here is what you should have –
Closed Menu
Open Menu
Styling The Menu Container
Next, the pop-up mobile menu itself is contained in an object called .et_mobile_menu and we will style this a little now. The first thing we want to do is to make the background semi-transparent. We do this because the menu can be anywhere when it is opened and we want the visitor to not lose track of thier position in the page.
The first thing we will do is to change the opacity of the background colour from the default white to a semi-transparent white. This can be done by using rgba. The first three arguments used by rgba specify the colour. You do this by using an RGB value where each component is a number between 0 and 255. So, 255, 255, 255 is white. This is equivalent to the HEX triple-digit number #FFFFFF. The fourth argument of the rgba is 0.6 and this specifies the opacity to be used. This should be a number between 0 and 1, where 0 means transparent and 1 means opaque.
/* style the container that the menu elements are housed in */
.et_mobile_menu {
/* background is white by default */
background-color:rgba(255,255,255,0.6) !important;
}
The next addition to the CSS code will style the border of the container. Now that the background is sem-trasnaprent, it would be good to actually use a border, to make it clearer that it is a single object and to separate it from the background.
So we add a couple of extra lines of CSS to what we were already using. This will create a 1 pixel wide border in a solid style using our chosen colour. The border-radius will add a rounded corners to the menu container. Sometimes, people use ems instead of pixels to set the border-radius.
/* style the container that the menu elements are housed in */
.et_mobile_menu {
/* background is white by default */
background-color:rgba(255,255,255,0.6) !important;
border: 1px solid #e9b000;
border-radius: 10px;
}
If you want the menu container to appear in a slightly different position, you can add a setting for margin-top here as well. A positive value (in pixels) will move it down and a negative value will move it up.
If you have been following this so far, you should have something that looks like this. The menu is in a fixed position and does not move when scrolled, the background of the pop-up menu is semi-transparent and it has a round-cornered border.
There is another issue that we might consider doing something about though. The ‘Services’ menu item, has a shaded background. This is because it is the parent of a submenu and the background shading is intended to make it stand out. We will remove this background and rely on the indenting to identify submenus.
We can remove the shading on the submenu root item by targeting .et_mobile_menu .menu-item-has-children a. As it happens, the root menu item of submenus has the .menu-item-has-children class attached to it, so it is quite easy to target. Now, for the background colour, we could use the same colour here as on the container itself, we could duplicate the settings. But that would mean that if we decided to change the pop-up menu background colour, we would need to change it in two places. Setting this to transparent here instead allows the menu container background color to show through. With this setting, if we need to change the background colour, we only need to change it in the menu container. Of course, if we actually do want to use a different colour for the submenu root item, we would have to make that change here. This is the CSS code we need –
.et_mobile_menu .menu-item-has-children a {
background-color:transparent !important;
}
Though it isn’t obvious from the above, one other thing to worry about is that this CSS targets ALL of the HTML anchor elements (the ‘a’ elements) contained within .menu-item-has-children including ALL descendents. These HTML anchor elements are used for every menu item so if you have a lot of submenus, they will all be targetted by this CSS. Take a look at the structure of your menu and submenu using Google Chrome Inspect. Here is what our simple menu looked like –
The menus are unordered lists (ul’s) of list items (li’s). The submenu root is a list item that has the class .menu-item-has-children attached to it. The submenu list item contains a link (the root or parent item) and an unordered list of list items (the submenu). The CSS we suggested above does not simply target the link at the root of the submenu but ALL the links within the submenu (and its submenus if present). In most circumstances, this is not an issue. But, depending on what styling we actually apply, if we do not notice that all submenu items are targeted, this might have an unexpected effect. To make this clearer, try instead something like –
/* target ALL descendents */
.et_mobile_menu .menu-item-has-children a {
background-color:transparent !important;
color:red;
}
You should see that all submenu items are now red and all anchor links (theHTML ‘a’ elements) have been targetted. Though it does not make much difference with the default menu, this was not what we intended. We wanted instead to only target the root menu.
There is a convenient way of solving this by restricting the targeting to only direct descendents of .menu-item-has-children. We do this by using the ‘greater than’ selector. This will do exactly what we want and only target immediate descendents, the immediate children.
You can convince yourself that this works by replacing the above with this instead –
/* target Immediate descendents only */
.et_mobile_menu .menu-item-has-children>a {
background-color:transparent !important;
color:red;
}
This is much safer. There is much less chance of unintended side effects. So this is what we need –
.et_mobile_menu .menu-item-has-children>a {
background-color:transparent !important;
}
Styling The Menu Items
We’ve done all the tricky bits now. This is the easy bit. In fact, we already changed the colour of the submenu items when we were testing the behaviour of the CSS a moment ago. Remembering that a menu is a nested list of unordered list items and that it is the anchor links (the ‘a’ elements) that display the text, so we can target all menu items and change their colour simply with –
/* style the menu items */
.et_mobile_menu li a {
color:#e9b000 !important;
}
We could also change the font-size and font-weight of the text in the menu items here if we wanted to.
The other thing we might consider doing is to set the weight of all menu items to be a little less heavy. We need to do this to both the menu items and the root of the submenus. This CSS to deal with this is –
.et_mobile_menu li a, .et_mobile_menu .menu-item-has-children>a {
font-weight:400;
}
Some Other Things To Try
Though we haven’t used them here, these might be useful in some circumstances.
Remove the Horizontal Top Border Stripe
Divi puts a horizontal stripe at the top of drop down menus. It does this by using the border-top of the drop down menu container. Our styling herre effectively switched that off when we styled the whole border of the menu container. So don’t do this if you have applied the styling above. But, if you wanted to switch off the horizontal stripe at the top of the drop down menu, something like this would work –
.et_mobile_menu {
border-top: none;
}
Disable All Submenu Items
The Divi mobile menu aggregates all menu items into a single menu, indented to provide some visual structure for submenus. If you have a lot of menu items, the menu might be longer than the device it is displayed on, forcing the user to scroll to see the menu. If you have a lot of submenu items, you might decide not to display them. You can do that with this code –
.menu-item ul.sub-menu li.menu-item {
display:none;
}
Replace Mouse Hover Effect
Though you don’t notice this on mobile, on desktop, Divi uses a mouse hover effect on each menu item. Using Google Chrome Inspect we can see that it sets the background colour on mouse hover to rgba(0, 0, 0, 0.03). The above code actually disables the mouse hover effect on the submenu root menu item. If we really wanted to be fussy, we could put back the Divi default hover behaviour with this CSS. Remember though, we will only notice this issue if our website uses the mobile menu on the desktop. Also, if Divi ever change the default hover effect on mobile menu…. this will have to change as well.
/* maintain Divi mouse hover behaviour */
.et_mobile_menu .menu-item-has-children>a:hover {
background-color:rgba(0, 0, 0, 0.03) !important;
}
Styling or Replacing The Select File Text
If you want to leave the Select File text visible, you can style it to fit with the menu styling above. it might also be an idea to make it a little bigger and to move it down a little to line up better with the positioning of the hamburger icon we have used –
/* Style the 'Select File' text that */
/* normally appears in the mobile menu bar..... */
div.et_menu_container span.select_page {
font-size:32px !important;
padding:10px 10px !important;
color: #e9b000 !important;
}
This will not work unless you disable the CSS code that switches off the display of the Select File text –
/* switch off the Select Page text on Centered and Centered Inline Logo headers */
div.et_menu_container span.select_page {
/* display:none !important; */
}
If you do not like the Select File text and want to replace it with other text there is a fantastic trick for doing this. Simply put this code in your functions.php child theme file. The code here uses ‘Menu’ as the replacement text.
/* change the text used by WP for the 'Menu' in the mobile menubar */
add_filter('gettext', 'change_select_page_text', 20, 3);
function change_select_page_text($text, $orig, $domain ) {
if ($domain == 'Divi' and $orig == 'Select Page') { return 'Menu'; }
return $text;
}
Styling The Header
If you have made the Select Page (or other) text visible, it might be nice to give the menu header the same styling as the pop-up menu. The menu header is contained in an object called div#et_mobile_nav_menu. So, the cunning way to do this is to modify the existing code so apply the same styling to the header as has been applied to the pop-up menu container. The way to do this is simply to modify the existing code to be –
/* style the pop-up menu and header */
.et_mobile_menu, div#et_mobile_nav_menu {
/* background is white by default */
background-color:rgba(255,255,255,0.6) !important;
border: 1px solid #e9b000;
border-radius: 10px;
}
If you do this, it is very likely that the pop-up menu will overlap the header. One way to fix this is to use the suggestion made earlier to reposition the pop-up menu container by changing the value of margin-top, by pushing it down a little. Just add something like this where we have used 40px as the distance to be moved –
/* move the pop-up menu down a little to avoid overlapping the header */
.et_mobile_menu {
margin-top:40px;
}
All The CSS Code
For the sake of simplicity, here is all of the code from above, in one place, and wrapped in a media query to make sure irt only effects mobile devices. We have not included any of the code from the section Some Other Things To try.
@media (max-width: 980px){
/* this will fix the menu regardless of the header format */
.et_non_fixed_nav #main-header, .et_non_fixed_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
position: fixed !important;
background-color:transparent !important;
}
/*****************************************************************
Style the Mobile Menu Header
Used if we have a Heading Style of Centered or Centered Inline Logo
*****************************************************************/
/* switch off the Search button on Default header */
div.et_menu_container span#et_search_icon {
display:none;
}
/* make the enclosing container transparent on Centered and Centered Inline Logo headers */
div.et_menu_container div.mobile_nav {
background-color:transparent !important;
}
/* switch off the Select Page text on Centered and Centered Inline Logo headers */
div.et_menu_container span.select_page {
display:none !important;
}
/* switch off the mobile logo on Default and Centered headers */
div.et_menu_container div.logo_container {
display:none;
}
/*****************************************************************
Remove the shadow beneath the header
*****************************************************************/
/* this is used when viewport is at top of page */
#main-header {
-webkit-box-shadow:none !important;
-moz-box-shadow:none !important;
box-shadow:none !important;
}
/* this is used when we scroll and have a fixed header */
#main-header.et-fixed-header {
-webkit-box-shadow:none !important;
-moz-box-shadow:none !important;
box-shadow:none !important;
}
/*****************************************************************
Style the Hamburger
*****************************************************************/
/* style the opened mobile menu hamburger (make it an 'X') */
div.mobile_nav.opened .mobile_menu_bar:before {
font-family: "ETmodules";
content: "\4d";
}
/* color and size both the open and close hamburgers */
div.mobile_nav.opened .mobile_menu_bar:before, div.mobile_nav.closed .mobile_menu_bar:before {
color: #e9b000;
font-size:60px !important;
}
/*****************************************************************
Style the Menu Container
*****************************************************************/
/* style the container that the menu elements are housed in */
.et_mobile_menu {
/* background is white by default */
background-color:rgba(255,255,255,0.6) !important;
border: 1px solid #e9b000;
border-radius: 10px;
}
/*****************************************************************
Style the submenu root (parent)
*****************************************************************/
/* the root (parent) menu item of submenus gets treated a little different */
/* and needs this to deal with the background */
.et_mobile_menu .menu-item-has-children>a {
background-color:transparent !important;
}
.et_mobile_menu .menu-item-has-children>a:hover {
background-color:rgba(0, 0, 0, 0.03) !important;
}
/*****************************************************************
Style the menu items
*****************************************************************/
.et_mobile_menu li a {
color:#e9b000 !important;
}
/*****************************************************************
Set all items to the same font weight
*****************************************************************/
.et_mobile_menu li a, .et_mobile_menu .menu-item-has-children>a {
font-weight:400;
}
}
Awesome tutorial. I’m wondering if you’ve ever styled the mobile menu to use the slide in effect for only mobile. Divi has a nice way to turn it on for both desktop and mobile and but not just mobile.
Thanks Brian. Glad it was useful to you. No, sorry, I’ve not used the slide in menu much on either menu or desktop. Sounds like I should check it out. Thank you again for the comments.
Thank you for this great tutorial. I would like to change the breakpoint for mu mobile menu. I would like to have my regular menu on ipad and iphone landcape mode. Somehow the regular code to achieve this doesn’t work after applying the code above .
Did i do something wrong? Thank you
@media only screen and ( max-width: 468px ) {
#top-menu-nav, #top-menu {display: none;}
#et_top_search {display: none;}
#et_mobile_nav_menu {display: block;}
}
Hi Koen,
Very pleased you found the article useful – thank you. I’m not totally familiar with what you are doing but I think you are trying to leave the ‘regular’ menu visible on ipad and iphone in landscape….. Is that what the CSS you have supplied is meant to do?? I’m afraid I couldn’t get it to work, even without the code from my article.
Awesome Stuff! Have you by any chance tried keeping horizontal scrolling on mobile menu withouth collapsable buttons? im trying to find a way to use that for my secondary menu
Thank you Luis. Glad you enjoyed the article. Sorry, no, haven’t tried what you are suggesting. All the best with your work!
Outstanding! Thank you SO MUCH!!
I love your way of explaining things.
I would love for my fixed nav menu (on all screen sizes) to be a hamburger. I’m not sure why I’m having SUCH a hard time finding the CSS for it! It’s probably something incredibly simple…
Hi Abby,
Delighted you found the article useful. I’ve never tried to use the hamburger on all devices but I did find this article – hope it helps. If you just use the code without the media query, it should work for every device width. All the best.
https://divinotes.com/switch-the-normal-divi-menu-to-the-hamburger-menu-on-smaller-screens/
Hi Clark! Thank you soooo much for walking me through this tutorial! It helped me out a ton!
I had a question for you. The desktop version of my header has a height of 44px, but when I view it on the mobile version the header becomes super thick for some reason. Do you have any tips or CSS to change the height of the mobile header? I would really appreciate it!
Thanks,
Luigi
Hi Luigi, so pleased you found that article useful – thank you. Do you have a link to your site with the ‘super thick’ mobile header? Thanks, Clark.
Great post. Thanks for sharing your knowledge! I have the same question as Luigi. I want to make my mobile header much thinner and sleek. The height is too big right now. Is that possible to change?
Jared, Glad the article was useful. Thank you for your comments. Assuming you have a standard, not-customised mobile menu and you are using centered layout with a logo, you could try….. I’ve not actually tries any of this for real but I did look closely at a Divi site to work out the class names etc. For some of these, you might need to use !important to force them to work.
Hope this is useful, Clark
/* switch off the logo */
.logo_container {
display:none;
}
/* remove padding above and below the menubar */
header#main-header {
padding-top:0px;
padding-bottom:0px;
}
/* this is the padding at the top of the page */
/* changing it will move the main page up or down */
/* Might need to experiment with this value as it depends on height of header */
div#page-container {
padding-top:50px !important;
}
/* this will move the menu bar to be flush with the top of the page */
div#et_mobile_nav_menu {
margin-top:0px;
}
Hi, how come it removes the logo, i don’t notice anything in your code that says remove logo.
One thing i notice using your menu from this article (which is very helpful) in landscape view, on mobile , http://ecigarettebearwood.co.uk/ , you can’t view all of the menu, it doesn’t scroll to the bottom.
Although as i write this i think maybe it’s because i set the mobile nav to be scroll-able on mobile so people can always access the menu (grrr)
Glad you found this useful Nicholas. Is it Divi that is removing the logo on mobile? Yes, the number of items in the mobile menu is always a challenge on mobile landscape.
I wish there was an option to remove or speed up the animation speed – it’s too slow pulling down from the top!
Does this help at all John? I know it is for submenus but it might work if applied to the main menu….. https://divisoup.com/make-your-submenus-visible-for-longer/
Appreciate it, exactly what i was looking for! Helpful tutorial 🙂
Thanks Albert. Really glad it was useful.
This was super helpful! Thanks! I’m wondering how to move the hamburger to the left side of the screen instead of the right? Seems like this should be simple, but I’m struggling…
Hi Kate, Really pleased you found the article interesting. Thank you for your comments. The hamburger character is inside a container called .mobile_menu_bar_toggle that is positioned absolutely, so I think just setting the ‘left/right’ values would work….
.mobile_menu_bar_toggle {
left:10px;
}
You might need to force this to be !important and you might want to switch off the display of the ‘Select Page’ with something like
.select_page {
display:none;
}
.mobile_nav_opened {
background-color:transparent;
}
Hope this helps, Clark
very awesome tutorial, I am looking for a tutorial to modify the theme of mobile divi menu and I find it here. Thank you for sharing.
So pleased this article was useful. Thank you for leaving a comment. Clark
Kate, were you able to move the hamburger menu?
Thanks for the tutorial!
It would be really great to be able to apply the same system as on the OceanWP theme mobile menu, I explain myself:
There are two clickable areas on the menu, on the left access to the corresponding page, on the right click to open the submenu.
example : https://gbdesignstudio.co.uk/
Do you have any clues for doing this on DIVI?
Tks 😉
Hi Chris. That’s quite neat. I think it would be quite difficult to do though without modifying the PHP that generates the menu. Generally, you can use CSS to move things around but it looks to me as though, to get the OcenWP behaviour, you would actually need EXTRA elements in the menu….. two links on every menu item that has a submenu – one link for the page and another to reveal the submenu. So I think you would have to modify the PHP to get it to generate different HTML, that included these links. Does this make sense Chris?
Hello! Thank you for this article. I was wondering if there was a way to use a different mobile style from the desktop style. I currently use the centered logo with menu items on the left and right. On mobile, it keeps the logo at the top and the hamburger menu at the bottom. I’d like it to be the at the left and then the hamburger at the right.
IS that possible?
Hi Kris, yes this is possible but not trivial. The mobile header contains quite a lot of different elements all carefully arranged. You can move them around using CSS but it is quite tricky to make sure you don;t move something else accidentally. So, yes, definitely possible. See my earlier answer to the question from Kate. I haven’t tried the solution I suggested to her but the intention was to move the hamburger to the left. Moving to the right would be similar I think. Hope this helps.
is there a way to have the active page on the mobile menu a different text color? using a:active maybe?
thanks! great work.
Glad it was useful Richard. The current page is actually ‘flagged’ with an additional class. So something like….
#et_mobile_nav_menu a {
color:green !important;
}
#et_mobile_nav_menu .current-menu-item a {
color:red !important;
}
might do something along the lines of what you want. You can apply this to the desktop menu as well by including a clause for #top-menu as well
#top-menu a, #et_mobile_nav_menu a {
color:green !important;
}
#top-menu .current-menu-item a, #et_mobile_nav_menu .current-menu-item a {
color:red !important;
}
Hope this is useful. All the best.
that worked perfectly, tank you. i had tried the typical ‘a:active’ with zero success but the ‘.current-menu-item’ was holding me up. the a:active’ does work on the main menu though.
thanks again!!
Glad to help Richard. All the best with your website business.
Hi,
Thanks for the amazing post. I`m working on Divi website and mobile is kind of pain a***
I have desktop full image page. It looks good on mobile too, but I don`t like that logo is higher than Menu button.
Using CSS I removed “Select Page” and another CSS from another website to change hamburger with inside text Menu. See CSS below.
My question is. How do I place logo inline (on the left of hamburger ). Sort of replacing Select Page. This way I want to reduce the height of the header.
/*———[MOBILE MENU BUTTON ]————*/
.mobile_menu_bar:before {
background-color: #5DB2B8;
padding: 2px 0px 2px 2px;
top: 8px;
color: #fff!important;}
.mobile_menu_bar::after {
font-family: Arial;
font-size:16px;
content: “Menuー”;
position: relative;
padding: 9px 8px 8px 6px;
background-color: #5DB2B8;
color: #FFFFFF!important;
cursor: pointer;}
.mobile_nav.opened .mobile_menu_bar:before {
content: “\4d”;}
Thanks
Hi Adam, really glad you found the article useful. Sorry though, not sure I totally understand what you are trying to do. Have you got a link I can look at Adam? Clark
have another question:
in certain viewports, i cant see the entire menu (bottom of menu cut off with the screen). particularly on my phone in landscape view.
is there a way to force the menu to be taller?
thanks!
Hi Richard, Yes, if you have enough items in the menu, it is too big to display on mobile, even on portrait orientation. I don;t think there is anything built in to ‘fix’ this. I tend to ignore this issue in landscape but try to fix if it happens in portrait. I haven’t come up with anything better (so far) than adjusting the font size and the top and bottom padding (on the ). I sometimes resort to removing all submenus if really desperate. It’s not a great solution 🙁 Take a look at something like…. –
@media only screen and ( max-width: 980px ) {
/* switch off all submenus on mobile */
/* otherwise menu is HUGE */
.sub-menu .menu-item {
/* display:none; */
}
/* remove the submenu root */
.menu-item-has-children>a {
/* display:none !important; */
}
}
i found a solution that includes the scroll bar.
this sets the height and when the viewport isnt tall enough a scroll bar will show up for the mobile menu. i did have to remove the border-radius as it looked strange with some corners rounded and others boxed as a result of the scroll bars.
let me know what you think, thanks!
.et_mobile_menu {
max-height: 70vh;
overflow: scroll !important;
}
Looks good Richard. I’ve seen people use a scrollbar before and I think it is probably a decent solution if you can’t make the menu content any smaller. Well done and thank you for posting here.
Great Tutorial. Was able to adjust the Divi mobile menu almost exactly as I need it. One quick question. Do you have any insight on not making the mobile menu visible until after initial scroll?
Thank you Jim. Really glad you found that useful. Sorry, I’ve not done much in respect of making the menu visible on scroll etc. I think I would look to see if any of the header class names changed when the page is scrolled. I think this might depend also on what header format you are using…. If you can find a class that present in the header only during the ‘unscrolled’ state and another class that is in the header only during the ‘scrolled’ state, you might be able to display the menu depending on the presence of that class or not. Does this help at all Jim?
All the best with this – let me know how you get on, Clark.
First of all give you congratulations for the work. What I want is that only the submenu text changes color, in your example it would only be the “design” and “build” texts. I’ve tried but I’m going crazy. thank you very much
Hi Lorena, Glad the article was useful. Does this work to target the text on the sub-menus? –
.et_mobile_menu .sub-menu a {
color:red !important;
}
It works perfectly!! Thank you so much!!
Hi Lorena, Glad to help. All the best with your website 🙂
hi, can you update this article? I think they must have changed stuff because I’m applying the css and nothign happens
Hi Joao, I just tried it at Divi 3.9 and it seems to me to work. Do you have a public site I can look at where you have tried to use the code?
Clark
Hi
Thanks for the article. I need to change the bg color of the mobile dropdown menu. The header (mobile) bg should be transparent but the dropdown a color of choice. How do i do this?
Thanks
Regards
Moreno
Hi Moreno,
Glad you found the article useful. You should be able to do what you want by setting the background colour of .et_mobile_menu. See the section in the article on Styling the Menu Container….. I set the background to a semi-transparent white in that. If you don’t want it to be semi-transparent anything like this should work –
.et_mobile_menu {
background-color:red;
}
If you have submenus, depending on how you have treated them, you might need a little extra to target them.
Hope this helps.
clark
Hi. I think I understand all of this, but I don’t understand how adding an “X” icon will CLOSE the menu when clicked. I’d like to know if DIVI is somehow managing that close function outside of what you described here (before I try to implement this customization), or if I missed something?
Thanks
Hi Jeff, thank you for taking the time to read the article and to comment. In fact, Divi takes care of all of the functionality of opening and closing the menu. So, clicking the hamburger would pop-up the menu, and clicking it again, when the menu is still visible, closes it. All we are doing is changing what the hamburger looks like when the menu is popped up. Whoever designed Divi, was kind enough to use two different classes, so that we can distinguish between the open and closed menu. Divi does not use this feature, but we do, when we make this change.
Hope this helps.
Clark
Woooow! What an amazing information. This blog have so much value for me. Appreciate it. You are the reason why I saved time and had fun while designing my website.
Best regards
Jari
Hi Clark, Thanks very much for this tutorial, I’ve managed to implement all into my client’s website http://asbestossutherland.com.au/home
I am only struggling with one tiny thing; the command to move the menu button when opened doesn’t want to work for me. I must be missing something crucial..Here’s the CSS I’m using:
.mobile_nav.opened .mobile_menu_bar:before {
margin-top: -20px !important;
}
I need the cross up the top left when opened so it stops interfering with the other menu items.
Many thanks again 🙏
Jim
Hi Jim, Glad you found the article useful. It looks to me, from your site, as though that is working now. Am I right? All the best, Clark.
Thanks for this great Tutorial 🙂
Really happy it was useful Angelika 🙂