Making your site stand out from the crowd is sometimes easier said than done. Fortunately, you can get involved with DIY by adding creative customization touches that will ensure that your blog stands out from others.

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

This is the region I'm talking about:

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.

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.

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

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:

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

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.

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.

Go to " Header & Navigation> Header Elements 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 the following:

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.

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

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEME [/vcex_button][/vc_column][vc_column width=” 1/2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family =”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

3 Comments

cocos on 8 January 2020 to 22 h 13 min

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
Response,
Germain Jung on 10 October 2018 to 10 h 20 min

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,
Response,
- Thierry Bertrand on 10 October 2018 to 16 h 32 min
  
  Hello Germain,
  
  Do you want it to be white on all pages or just a few pages?
  Response,