How to Make the Background Color of the Divi Menu Different on Every Page

Making your site stand out in the crowd is sometimes easier said than done. Fortunately it can take the smallest bit of creative detail to help you push your site into a more unique territory. In today’s tutorial I’m going to be using one of my favorite features of Divi — the Divi Builder Settings box, and in particular the custom CSS box inside that.

This is the area I’m referring to:

What this does is limit whatever CSS you put in this little box to only be applied to the page that you are editing. That’s an incredibly cool and useful feature! I’ve used this particular CSS box in so many ways, you’d be surprised how many problems it will solve.

Here’s the end result we’ll have at the end of this tutorial. The background color of the navigation menu changes based on the page you are on. As an added option I’m including how to have your header social icons change color as well.

I’m going to first show how to accomplish the background color for the menu. Then separately I’ll show the steps to have the social icons match too.

Let’s get started!

How to Make the Background Color of the Divi Menu Different on Every Page

Subscribe To Our Youtube Channel

The Menu Background Color Steps

First I’m using the default header format. If you use another format this tutorial should still work because the generic div ID for this area in Divi is the same for all formats (#main-header), as far as I know. If you run into issues with other formats I can help as best I can if you post in the comments.

I’m then going to make sure my links will show up against the background. The colors I’ve chosen — which you can find here on Coolors.co if you’d like to use them — are on the darker side so I need to make my link text a light color. I’m sticking with white.

• I’m using rgba(255,255,255,0.6) as my link color and solid white as my active link color (I just like the visual effect that gives)

Next go to the page you want to change first (you should have your menu links set up). Click the “3 lines” icon and an options box will pop out

Now add the following CSS into that box

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

You should have something similar to this, don’t forget to change the hex code to the color of your choosing

Click save and update, and that’s it for the main menu part! It’s literally one line of code, how great is that!? 😀

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

The Secondary Nav Social Icons Steps (Optional)

For this part we’re going to be editing the code that we’ve already done, plus add some CSS sitewide, and I’ll explain why some CSS should go in the individual pages why some shouldn’t below.

So first make sure you’ve set up your social links. Go to Divi Theme Options > General and add your URLs to your social media pages

Next go to your Secondary Menu Bar settings and set your background and text colors. I’m choosing white as the text color because I’m going to be adding a round colored background to each social icon to match with my new menu color, so the icon needs to show up.

Go to Header & Navigation > Header Elements and check the box Show Social Icons

Now remember how we went into every page and opened the box that allowed us to add custom CSS? We’re going to go back there and edit what we wrote before. Replace what you have there with the following CSS, OR if you recognize what is different feel free to just add the additional element’s code.

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

 
What this is doing is telling our site to not just change the background color for the menu on this page but also the background of our social icons. We’re simply adding another element into the mix. You should have something that looks similar to this

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

Lastly Some Sitewide CSS

The following code will go in your Divi Theme Options > General Custom CSS box OR your child stylesheet.

#top-header .et-social-icons li {
    margin-left: 5px;
}
#top-header .et-social-icon a {
    padding: 4px;
    margin-bottom: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    line-height: 24px;
}

 
You may be wondering why this didn’t also go in the page CSS box. The reason is this particular chunk of code is affecting every instance of these targeted elements so it’s inefficient to put the exact same duplicate code in several spots. The background color, that changed per page, but this code does not. It’s just better practice in helping to keep your file size to a minimum.

And That’s It!

After following both sets of steps you will end up with a site where all the header elements change color as we move from page to page. Pretty nifty design detail if you ask me 🙂

Be sure to subscribe to be notified about more easy-to-follow articles on how to customize parts of your Divi site!