Blog

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

Blog

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

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

Divi is a popular WordPress theme that offers a powerful page builder and a wide range of customization options. However, it does have its limitations, and sometimes we need to add CSS code. While we can edit various elements such as link colors, font sizes, letter spacing, etc., directly from the backend, one aspect we can’t easily modify is the link color when hovered over. By default, Divi only reduces the link’s opacity to 70%. So, how can we change the color of menu links in Divi?In this tutorial, we’ll provide a code snippet to achieve the desired “divi change link color”.

Divi change link color, with Divi options

divi change link color

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.
divi change link color
#top-menu-nav>ul>li>a:hover{
	color:red;
	opacity:1;
}

The result:

change link color hover divi

Change the color of only one link

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

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.
divi change link color 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

How to change the color of menu’s links 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!

Divi change link color | Destaca Divi themes experts

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.

 

¡Apuntate a nuestra lista!

Los mejores trucos y tutoriales para Divi y WordPress en tu bandeja de entrada

Join our list!

The best tricks and tutorials about Divi in your inbox

On our shop

En nuestra tienda

Suscribe

The best tricks and tutorials about Divi in your inbox

Apúntate a nuestra lista

Los mejores trucos y tutoriales para Divi en tu email

También te podría gustar:

You may also like

How to Create a Child Theme in WordPress

How to Create a Child Theme in WordPress

In WordPress website development, customization is key to stand out and offer a unique experience to users. However, directly modifying a theme can be problematic when it comes to updates. This is where the concept of a Child Theme comes into play. In this article, we...

Divi Layouts – What are they? How to use them?

Divi Layouts – What are they? How to use them?

Divi layouts are pre-designed pages or page fragments that can be imported directly into the Divi visual builder. These templates allow users to create professional-looking websites quickly and efficiently, without requiring advanced design or programming knowledge....

Download, install and license activation on plugins and themes

Download, install and license activation on plugins and themes

How to download and install a pluginHow to download and install a themeHow to install the license for a plugin or themeHow to import a themeHow to install a layoutInstalling themes locallyTechnical problems. Minimum memory requirementsWhere is my invoice? How to...

Unlocking the Potential: Why You Need a Divi Child Theme

Unlocking the Potential: Why You Need a Divi Child Theme

In the fast-paced world of online presence, standing out is key! At Destaca, we understand the importance of making a lasting impression. That's why we're excited to bring you Divi Child Themes that truly empower your website - dive in with us to discover why having a...

Text over image in DIVI

Text over image in DIVI

Today, we're excited to unveil a simple yet powerful hack that can significantly enhance the legibility of text over image in Divi. This handy tutorial is part of our Divi Basics series, designed specifically for those who are just dipping their toes into the vast...

Full Height Section in DIVI

Full Height Section in DIVI

How do I create a section that fills the total height of the screen (full screen) in DIVI? In this post we are going to show you how to create the sections that occupy the entire height of the screen. This is ideal for creating more visual webs, powerful call to...

0 Comments

Submit a Comment

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

Get 5€ Off now!

Register now and get free coupon code.

 Register Now
Select currency
Euro