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

Making your site stand out from the crowd is sometimes easier said than done. Fortunately, you can take yourself to play the little do-it-yourself by adding creative touches of personalization that will make your blog stand out from the others.

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:

What this means is that any changes we apply here will only be effective on the page we are editing. It's 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.

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

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 use the default header format. If you use another format, this tutorial should still be effective because the Divi generic "divs" ID is the same for all formats (# main-header), as far as I know. If you have problems with other formats.

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 have to make sure that the links are 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 have a light color. I opted for the white color.

I use rgba (255,255,255,0.6) which will be the color of the link and dark white as the color of the active link (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 icon at "3 lines" and an options box will appear.

Now, add the following CSS in this box:

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

You should have something similar to this, do not forget to change the hexadecimal code of the color of your choice:

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

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Now, you just need to add that same code for all your pages and change the hex code every 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.

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

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

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 this:

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

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

General CSS

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

# 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 change the color of the text in the main-header? Having a background (on my main-header) transparent, the font color I chose (on my main-header, which shows my different topics) 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