Blog

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

Blog

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

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

Anto Fernandez

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

link changed color menu 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.
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.

 

¡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

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

Responsive Font in DIVI

Responsive Font in DIVI

Responsive fonts in DIVI? Is that even possible? YES!!!! What is more, you can do it with any font type! So today we would like to tell you a bit about the Divi responsive font. We will show you how to adapt the font size to your screen, no matter if you look at the...

How to change the order of the Divi’s columns in mobile?

How to change the order of the Divi’s columns in mobile?

Divi is a fantastic builder with a few options to create any website. At times it is also necessary to use CSS if we want to achieve the best results. In the example of this post we are going to change the order of the divi columns in mobile device. As we can see in...

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