How to: Divi Mobile Menu improvements

by | Tips & Tricks

Below is an extract from our ‘Tips & Tricks‘ page.

The default Divi Mobile menu can have the colour of text and background changed and whether to show the logo or not within the Divi Theme customizer under Mobile Styles | Mobile Menu.  But to make your mobile menu more unique, you can also apply the following CSS:

Remove ‘Select Page’ and raise Hamburger

The default mobile menu shows ‘Select Page’ to the left of the hamburger menu icon with the logo above this (if the ‘Show Logo’ is selected in the Divi Theme customizer under Mobile Styles | Mobile Menu).  This, in my view,  takes to much space and the ‘Select Page’ is unnecessary as users know that the ‘hamburger’ icon is the mobile menu. So to reduce space and make it look more attractive, we need to remove the ‘Select Page’ and place the hamburger next to the logo. To do this add the following CSS to your child style.css file

Change Opened Hamburger to another symbol

If you wish, you can change the opened drop-down mobile menu hamburger to another unicode symbol e.g. a cross. Below is the CSS to do this and to change the colour / font weight of the icon when the drop-down menu is open

You can use any unicode sybol in the “content:” in the above CSS – here’s a decent selection displayed in categories.  To use unicode in CSS, just replace the unicode notation part  “U+” with a backslash, so “U+4d” becomes “\4d”

Change mobile dropdown top border

Divi seems to place a border at the top of the drop-down menu. To change the width, type and colour, apply the following CSS

Make mobile dropdown menu full width

And finally you can make the mobile drop-down menu full width if you wish with this CSS

Signup for the iConnik quarterly newsletter

Thanks. You have successfully signed up

Share This