pixel

The default mobile menu on Divi is fine.  It does what it needs to do in terms of allowing your visitors to navigate through the pages.

BUT, after you have spent ages sourcing beautiful images, customizing the colors and maybe even writing CSS to really make the site into something special, well the mobile nav bar may just fall a little flat.

I am here to make your life easier (your welcome, but that’s what friends are for, right?)

To Change the background color of the drop down items

.et_header_style_centered #et_mobile_nav_menu {
background-color: #000 !important;
}

To change the color of the navigation box

@media all and (max-width: 980px) {
#mobile_menu {
background-color: rgba(0, 0, 0, 1) !important;}
}

 

In case you are wondering where exactly it is that you put that CSS, I have two options for you.
  1. In the Style Sheet of your Child Theme
  2. Navigate to the Divi Theme Options panel and paste it into the bottom box, CSS.

If the child theme concept is new to you, you can read more about it, What Happens If I Don’t Use a Child Theme.

If you are looking for a totally tricked out navigation bar for your mobile website I would like to share with you the Mobile Menu Customizer for Divi.  It is on sale now for $16 (normally $21).  There is a video which shows you all of the options that is packed into this one little plugin.  I will also show you a before and after image at the bottom of the post. I honestly could spend the day making new menus, for your sake, I just did a few simple edits so you can get an idea of some of your options.

If you do purchase the plugin, you will need to unzip the download file, you will see the zip for the plugin and a ReadMe.pdf, which gives you set up instructions and all of the options that you can control with the plugin.  I will add them here for your reference

MENU SETTINGS
MAKE MENU FIXED
FIXED MENU MAX-HEIGHT (since v1.1)
MAKE MENU FULLWIDTH
MENU PADDING
TOP BAR BG COLOR
HEADER BG COLOR
MENU BACKGROUND COLOR
TEXT ALIGNMENT
LETTER SPACING
FONT SIZE
FONT STYLE
MENU LINK COLOR
CURRENT MENU LINK COLOR
MENU BORDER WIDTH
MENU BORDER RADIUS
MENU BORDER COLOR

MENU ITEM SETTINGS
MENU ITEM MARGINS
MENU ITEM HEIGHT
MENU ITEM BG COLOR
CURRENT ITEM BG COLOR
ITEM BORDER WIDTH
ITEM BORDER WIDTH
ITEM BORDER RADIUS
MENU ITEM BORDER COLOR

SUBMENU SETTINGS
COLLAPSE SUBMENU
SUBMENU BACKGROUND COLOR
SUBMENU FONT SIZE
SUBMENU FONT STYLE
SUBMENU LINK COLOR
SUBMENU CURRENT LINK COLOR

SHADOW
SHADOW DIRECTION
SHADOW X-OFFSET
SHADOW Y-OFFSET
SHADOW BLUR
SHADOW SPREAD
SHADOW COLOR

Note: the sample website is for a client I am working on. I have used the Emerie theme and Mor Cohen designed the pretty graphics and picked the colors.

divi mobile menu

mobile menu with divi

 

EIleen Lonergan
Eileen Lonergan was an integral part of this company. Unfortunately, Eileen Passed away on the 31st of October 2018 after a short battle with Cancer. She leaves behind the legacy of the Divi Theme Users Group and hundreds of people that she helped through coaching, building outstanding websites and just being - accessible. We miss her every day!
Click to access the login or register cheese

Subscribe To Our Newsletter to get the latest news and product updates

You have Successfully Subscribed!

Pin It on Pinterest

Share This