Blog

How to change the color of menu’s links in Divi
Change color link hover in Divi

How to change the color of menu’s links in Divi

Destaca Imagen
Change color link hover in Divi

Divi is a popular WordPress theme that comes with a powerful page builder and a wide range of customization options. But it has some limitations and sometimes we need to add CSS code. In fact, we can edit from the back office the color’s link, font-size, lettering space, etc… but for example, we can not edit the color link, when we hover it. By default, Divi only reduces the opacity of the link to 70%.

In this little tutorial, we’ll show you a snippet code to change the color of the links.

Change the color of all links with Divi options

How to change the color of the links menu in Divi

CSS for changing menu link hover color in Divi:

Here are the steps to change the color of links with Divi WordPress:

  1. Login to your WordPress dashboard and go to the Divi Theme Customizer
  2. Navigate to the “Additional CSS” and paste the next CSS code.
  3. Once you have added the code, click “Publish” to save your changes.
#top-menu-nav>ul>li>a:hover{
	color:red;
	opacity:1;
}

The result:


Change the color of only one link

If we want difference or distinguish only a link we can do it.

  1. Navigate to “Appearance” / “Menus” and select our menu.
  2. Click on “Screen Options” and activate “CSS Classes”. You’ll find this menu in the upper right.
Activate the class options in WordPress's menu

3. Add a class name to the link that you want. Click to “Save”.

Add a class in a link of WordPress

4. Go to “Divi Theme Customizer” / “Aditional CSS” and add this code. Important, you need to use the same class as before:

#top-menu .my-shop a{
	color:purple /* Change this value for the color that you want */
}


Change the background for the submenu link in Divi

By default, Divi applies a gray background in the links of our submenus. We can remove or edit it with CSS too.

Submenu color link in Divi
#top-menu li li a:hover{
	background:yellow;
}

The result:

How to change the background of the submenu link in Divi

In conclusion, Divi is a powerful tool but knowing CSS gives us more freedom and control for customizing our designs.

Do you like this content? Subscribe to our newsletter and be the first to receive the new posts in your inbox!

About Destaca Imagen

CHEMA & ANTO

We are brothers. As a designer and developer, we have decided have to join forces  to create plugins and themes for WordPress.

 

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Select currency
Euro
$ United States (US) dollar

Get 5€ Off now!

Register now and get free coupon code.

 Register Now