menu color on divi

Menu color on Divi: how to use the Divi builder to customize your blog, and in particular the CSS area.

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

Here is the result we will have at the end of this tutorial. The background color of the navigation menu 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 will show you how to make the social icons match.

menu color on divi

Table of Contents

Menu color on Divi: Apply colors to menus

First, I use 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.

We need to make sure the links appear at the bottom. The colors I chose, which you can find on Coolors 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.

I am using RGB (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 where you want to apply the first change ( you should see the menu links set up ). Click on the “3 lines” icon and an options box will appear.

Now add the following CSS in this box:

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

Click on ” Save and Update “, and it will apply to the main menu, and all in one line of code.

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

Read more: Hire a hosting: how to choose the best hosting without being teased

Social media icons (Optional)

For this part, we are going to modify the code that we have already done, then add some code at the CSS level of the site, and I will explain to you why some CSS should be added to the individual pages and why some should not be there. ‘to be.

So first you need to make sure you’ve 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 secondary menu bar and set the background and text colors. I’m choosing “white” as the text color because I’m going to add around the colored background to each social icon to match with the new menu color so that the icon can appear.

Go to ” Header & Navigation> Header Elements ” and check the ” Show social icons ” box.

Do you remember how we went about adding CSS code to every 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’s different you can just add additional code.

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:

menu color on divi

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

CSS General

The following code will be in your ” Theme options> CSS box ” or in the style file of the child theme.

You might be wondering why this doesn’t fit in the page’s CSS box as well. The reason is that this particular piece of code affects all of the targeted elements so it is inefficient to put the 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 weighing down your site.

That’s it for this tutorial, I hope it allows you to customize the menus on your WordPress blog.


For website maintenance service contact us.

Leave a comment

echo "";