Skip to Main Content

How to change the color of the menus between pages Divi

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Sometimes making your site stand out from the crowd is easier said than done. Fortunately, you can get caught up in playing the little tinkerer by adding creative touches of personalization that will make your blog stand out from the crowd.

In this tutorial, I will show you how to use the Divi builder to customize your blog, especially the CSS area.

This is the region I'm talking about:

Custom wordpress css builder section

What this means is that any changes we make here will only be effective on the page we are editing. This is an incredibly interesting and useful feature!

Here is the final result we will have at the end of this tutorial. The background color of the navigation menu that changes depending on the page you are visiting. As an additional option you will notice that the icons also change color.

Icon that changes color divi

I will first show how to apply the background color on the menu. Then separately I will show you how to make the social icons match.

If you have not yet read our tutorial on presentation of the theme WordPress Divi, I invite you to do it.

Let's start!

Apply colors to menus

First, I am using the default header format. If you are using another format, this tutorial should still be effective because the generic ID of "divs" on Divi is the same for all formats (# main-header), as far as I know. If you have problems with other formats.

Divi header format

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

We need to make sure the links appear on the bottom. The colors I chose, which you will find on if you want to use them, are on the darker side, so I have to make the text link a light color. I opted for the color white.

Personalization of the divi menu

I am using rgba (255,255,255,0.6) which will be the link color and dark white as the active link color (for the desired visual effect)

Then go to the page on which you want to apply the first change (you should see the menu links in place). Click on the "3 line" icon and an options box will appear.

Wordpress divi builder

Now add the following CSS in this box:

# Main-header {background: #474f61; }

You should have something similar to this, don't forget to change the hex code to whatever color you want:

Color customization divi settings

Click on " Save and update And this will apply to the main menu, all in one line of code.

Stop wasting time and money!

Discover the best tool to create your blog, your online store blog or any other website in just a few clicks!

Now you just need to add this same code for all your pages and change the hex code each time.

Social Network Icons (Optional)

For this part, we're going to modify the code we've already done, then add some code at the site's CSS level, and I'll explain why some CSS should be added in the individual pages and why some should not be 'to be.

So first you have to make sure that you have set up your social links. Go to " Divi Options> General theme And add your URLs to your social media pages.

Social divi icon

Then go to your settings in the secondary menu bar and set the background and text colors. I'm choosing 'white' as the text color because I'm going to add a round colored background to each social icon to match with the new menu color, so that the icon can appear.

Customizing the secondary menu

Go to " Header & Navigation> Header Elements And tick the box " Show social icons ».

Divi wordpress header element

Do you remember how we proceeded to add CSS on each page? We will go back and edit what we wrote before. Replace what you have there with the following CSS, or if you recognize what is different you can simply add the extra code.

# Main-header, # top-header .et-social-icon a {background: #474f61; }

This code will allow our site to not only change the background color for the menu on this page, but also the background of our social icons. We just added another element to the mix. You should have something that looks like the following:

Custom css code divi theme editor

You may need to check that hex colors are correct on each page.

General CSS

The following code will be in your " Theme option> CSS box Or in the style file of the child theme.

Custom section divi css theme options

# Top-header .and-social-icons li {margin-left: 5px; } # Top-header .and-social-icon a {padding: 4px; Margin-bottom: 8px; Width: 30px; Height: 30px; Border-radius: 50%; Line-height: 24px; }

You may be wondering why this is not so in the CSS box of the page. The reason is that this particular piece of code affects all the targeted elements so it is inefficient to put the exact same code in multiple places. Only the background color changes per page, but this code does not change per page. It's just a best practice to avoid adding weight to your site.

That's all for this tutorial, I hope it will allow you to customize the menus on your WordPress blog.

Other Divi tutorials

This article features 3 comments

  1. Hello,

    Thank you for all your tutorials.
    Do you know if we can put the divi submenu (second level below the dropdown) in fill-width? which takes up the full width of the page

  2. Hello,

    How do you go about changing the color of the text in the main header? Having a transparent background (on my main-header), the font color I chose (on my main-header, which presents my different sections) via the divi customization interface is black. However I would like it to be white on SOME PAGES because the photo below is too dark.

    How to do?

    Thanks in advance,

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top