Change the color of the primary menu and sub menu links on desktop and mobile, when you hover over them. By default you can set the color of the Primary Menu items and only the active menu item using the DIVI options.

Its a good visual indicator for the user when you change the color of the menu, specially if you have long sub menus. 

Let’s add some CSS to change the colors for desktop and mobile. To do this head over to your style.css in your child theme and paste the following CSS.  Alternatively you can also go to DIVI -> Theme Options and paste the CSS in the Custom CSS box. 
I have used an orange color (#ffa500) in my example CSS. Change it to the color best suitable for your website.

Add CSS to Change Hover Colors for your Primary Menu

/* Change color on primary menu */
#top-menu-nav #top-menu a:hover,#mobile_menu_slide a:hover
{
    color: #ffa500!important;
    opacity:1 !important;
}

Change color of primary menu on hover – DIVI

Add CSS to Change Hover Colors for your Mobile Menu

/* Change color on Mobile Menu  */
.et_mobile_menu li a:hover, header#main-header.et-fixed-header ul li ul li a:hover
{
color: #ffa500 !important;
opacity:1 !important;
}

Change color of mobile menu on hover – DIVI

I hope this DIVI Tip was helpful and if you do use it on your site, leave me a comment. For more such useful tips on WordPress and DIVI, do check out my DIVI Blog. 

Related Posts –

• How to Remove the Drop Down Arrow from the DIVI Primary Menu
• How to Change Hamburger or Mobile Menu Color in Divi
• Change the Color for Email, Phone and Social Media Icons in DIVI

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

In today’s quick tip we will add a background image to the DIVI mobile menu using a few lines of CSS.

First of all add the image to your media library and get the URL of the image. Make sure you choose an image that contrasts well with the menu item. You can also change your menu and sub menu item colors using the DIVI theme customizer. I have used an image of 600×900 pixels.

Copy the URL from the media library as shown below.

URL from media library

CSS to Add a Background Image to the Mobile Menu

Add the following CSS. To do this head over to your style.css in your child theme and paste the following CSS. Alternatively you can also go to DIVI -> Theme Options and paste the css in the Custom CSS box.

.mobile_nav.closed #mobile_menu,
.mobile_nav.opened #mobile_menu {
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background: url(“https://wpportfolio.com/staging/wp-content/uploads/2019/09/mobile-background.jpg”);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

Make sure you change the background url to the image url that you copied from your media library.

Here is what it should look like.

Picture Courtesy: Pixabay https://pixabay.com/photos/marine-water-wave-background-4487710/

If you liked this tip or used it on your website, do leave me a comment with your website. You can read more such tips on my DIVI BLOG.

Related Posts –

• Add Extra Text Before or After your Mobile Menu in DIVI
• Change the Color of the Hamburger Menu on Mobile and Tablet.

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

Lets add text before or after the mobile menu in DIVI. By default on mobile the menu turns into a hamburger icon. This tip may be useful specially if you want to explicitly add some text next to the hamburger. I read this tip on a Elegant Themes blog few years back and have used it occasionally on my client sites.

Here’s what the default menu looks like in DIVI. I have changed the color of the hamburger menu to black in this case. Read this post, If you want to know how to change the color of the mobile menu.

Default mobile menu in DIVI

Add Text After the Mobile Menu

Here is the css you will need to add text after the hamburger menu. Head over to your style.css in your child theme and paste the following CSS. Alternatively you can also go to DIVI -> Theme Options and paste the css in the Custom CSS box.

/* Add text after the hamburger menu in DIVI */
.mobile_menu_bar:after {
position: relative !important;
content: ‘My Menu’;
bottom: 10px;
left: 12%;
color: black;
}

This will look like the following. Change the text and color to match your website colors.

Text after mobile menu

Add Text Before the Mobile Menu

You can also add the text before the hamburger menu. For that use the following CSS.

/* Add text before the hamburger menu */
#et_mobile_nav_menu:before {
content: ‘My Menu’;
position: absolute !important;
bottom: 29px;
right: 35px;
color: black;
}

Here’s the result of the CSS.

Text before mobile menu

This is an easy tip to customize your DIVI site, with a few lines of CSS. I hope you liked this tip and if you do use it on your site, do leave a comment. For more such tips on WordPress and DIVI, check out my DIVI Blog.

Related Posts –

• Change the Color of the Hamburger Menu on Mobile and Tablet.
• Change Mobile Menu Top Border in DIVI

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

Aligning the DIVI Secondary menu to left or center is easy with a few lines of CSS. When you create a new menu in DIVI you can assign the default location for the menu to be the Primary, Secondary or Footer menu. Today’s tip is for aligning the Secondary menu.

Make sure you have a existing secondary menu ( which appears on top of the Primary menu ). In the image below I have created a new menu called “Secondary Menu” and have set the display location on the bottom to be the Secondary Menu.

Secondary Menu display location in DIVI

The image below shows the Secondary and Primary menu. As you can see, by default the secondary menu is aligned to the right.

Location of Primary and Secondary menu in DIVI

We will now add the CSS for alignment of the secondary menu. Head over to your style.css in your child theme and paste the following CSS.  Alternatively you can also go to DIVI -> Theme Options and paste the css in the Custom CSS box.

Secondary Menu Aligned to the Left

Add the following css to align the secondary menu to the left.

/* Secondary menu to the left */
#et-secondary-menu {
float: none;
}

Secondary Menu to the left in DIVI

Secondary Menu Aligned to the Center

Add the following CSS to align the secondary menu to the center.

/* Secondary menu to the center */
#et-secondary-menu {
float: none;
text-align: center;
}

Secondary Menu to the center in DIVI

I hope this tip helps you to quickly align your secondary menu in DIVI using CSS. You can browse through my other useful tips for DIVI and WordPress on my DIVI Blog.

Related Posts –

• Hide DIVI Top Header/Secondary Menu on Scroll
• Center the DIVI Footer Menu and Bottom Bar Contents

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

There might be times you might want to remove the drop down arrow from divi’s primary menu bar. Let’s see how we can do this. By default when you have sub menu items in your primary menu, you will notice that there is a small arrow to the right of the parent menu. I think this is a good desirable feature for your menu as it is a good visual indicator for a user that there are sub-menu items under this main menu item.

Recently I was working on a website for a client, who wanted a clean look and wanted me to remove the drop down arrow from the primary menu.

The image below shows the arrow on the drop down menu.

Drop Down Menu Arrow in DIVI

Remove the Drop Down Menu with CSS

With a little bit of CSS I was able to remove the arrow for my client. The sub menus are still visible when you hover over the main menu. While I like the drop down arrow, I removed it because that is what my client wanted.

Head over to your style.css in your child theme and paste the following CSS. Alternatively you can also go to DIVI -> Theme Options and paste the css in the Custom CSS box.

/* Remove the down arrow from divi’s primary menu */
‪#top-menu .menu-item-has-children > a:first-child:after{content: ” ;}
#top-menu .menu-item-has-children {padding-right: 0px;}

Drop Down Arrow Removed

The CSS looks for all the top-menu items that have any children (sub-menu) and replaces the content (down arrow) with a blank space. The second line of CSS also removes any extra padding to the right of the menu which have sub-items.

The menu still functions normally, showing the sub menus on hover.

Hope this tip help you and if you have any questions feel free to leave a comment. For more such tips on WordPress and DIVI, check out my DIVI Blog. 

Related Posts –

• Change Color of Primary and Mobile Menu on Hover in DIVI

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

By default when you click on the hamburger menu on mobile or tablet devices, you will find a blue border in DIVI. This blue border is right below the hamburger icon and above the mobile menu items.

Do you want to change the top border color of the mobile menu for your DIVI website to match the branding of your site.?

Add the following CSS code to your theme and change the color to match your website colors. You can add the CSS either to your style.css in your child theme OR go to the DIVI – Theme Options on your dashboard. In the General Tab, scroll down to the “Custom CSS” text area and add the CSS shown below the images.

I have set the top border to a shade of yellow (#d9b310) in the example below, to match my website colors. Replace the (#d9b310) in the code to the color of your choice to match the branding of your website.

Here is what it looks like when viewing my site on mobile. The images and CSS below show the default blue border out of the box, changing the border color and how to remove the border.

Related Posts –

• Change the color of the hamburger menu on mobile and tablet.
• Add extra text before or after your mobile menu in DIVI

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

Do you want to change the color of the hamburger icon on your mobile menu and tablet for your DIVI website.?

Add the following CSS snippet to your DIVI theme and change the color to match your website colors. You can add the CSS either to your style.css in your child theme OR go to the DIVI- Theme Options on your dashboard. In the General Tab, scroll down to the “Custom CSS” text area.

I have set it to a shade of yellow (#d9b310) in the example below, to match my website colors. Replace the (#d9b310) in the code to the color of your choice to match the branding of your website.

/* Change color of the hamburger menu on tablet and mobile*/
span.mobile_menu_bar:before {
     color: #d9b310!important;
}

Here is what it looks like when viewing my site on mobile.

Changing the color of the Hamburger Menu only on a specific page in DIVI

You can also tweak the color of the hamburger or mobile icon only on a specific page in DIVI. I use this trick sometimes if my hamburger icon is not contrasting well with a background slider image. This will override the previous hamburger menu color (if you did set one in the style.css), but only on this specific page.

Open a page in your WordPress dashboard in DIVI. Click on the Page settings as shown below.

Copy the same CSS as shown above in the Custom CSS box. Click on Save and Update your page.

Related Post : Change the color of the top border mobile menu in DIVI.

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.