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

Find everything you need to create with Divi

Divi plugins | Divi Themes | Divi Layouts

At Destaca Imagen, we bring your ideas to life with Divi. We create unique DIVI templates that transform your website into a visual and functional experience, tailored to your needs. Give your project the boost it deserves with our innovative and fully customizable designs. The future of your website starts here!

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

Learn how to use Flip Card Divi effect

Learn how to use Flip Card Divi effect

Introduction to the CSS Flip Effect in Divi Interactivity is key to capturing and keeping visitors' attention on your website. One of the most effective ways to achieve this is through the Flip card divi CSS effect, which transforms static presentations into dynamic...

How to create a footer in Divi step by step

How to create a footer in Divi step by step

The footer, or “footer”, of your website is one of the most underrated, but most important areas. It's the last place users see and often contains vital information such as contact links, privacy policies, and social media profiles. If you are using Divi, the popular...

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...

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