How to create a coloured menu bar

How to give your Divi website a coloured menu bar

The default menu options in Divi are a bit boring and make the website look abit plain and unfinished, this simple css snippet will add some extra colour to your menu.

Child Theme

Before you start make sure you have created a child theme for the website you are editing.

Step 1: The Setup

Before we add the CSS code we need to make some changes in the Divi Theme Customizer.

Click ‘Header & Navigation’

Click ‘Header Format’ then select ‘Centered’

Step 2: Adding CSS

Using Google Chrome > Right Click > Inspect

Click ‘Sources’ then click the ‘wp-content’ folder

Click ‘Themes’ > ‘Divi-Child’ (this may be different depending on your setup) > style.css

Copy and Paste the below code in to your child theme, make sure you paste it under the green text!

Change the hex codes to the colours you require.

(Copy from the @ to the } at the end inclusive.)

@media only screen and ( min-width: 981px ) {
.container.et_menu_container {min-width: 100%!important; padding: 0px!important;}
#et-top-navigation {background-color: #044ca7;}
.et_header_style_centered #top-menu > li {padding: 15px 10px 0px 10px!important; color: #fff;}
.et_header_style_centered #top-menu > li a {padding-bottom: 15px!important; color: #fff!important;}
.et_header_style_centered #top-menu > li:hover {background-color: #013178; color: #fff;}
.et_header_style_centered #top-menu .current_page_item {background-color: #013178; color: #fff;}
#top-menu li {padding-right: 0px;}
}

You can edit the codes within the Inspect Console, this will give you a live view of the changes you are making.

Copy the code to the actual child theme. Now this is the bit that can break your whole website so make sure you do it properly.

Select ALL the code in the console window (ctrl+a or cmd+a on mac) and copy it (ctrl+c or cmd+c on mac)

Got to the backend of the website (best to do in a new tab) then Appearance > Editor

Select all the existing code (ctrl+a or cmd+a on mac) and paste the code you copied  (ctrl+v or cmd+v on mac) now click update file.

Finished

You have now created your a coloured menu for your website, please note you will need to clear your cache to view the changes download a Chome plugin called ‘Clear Cache‘ this will give you a button to click in your tool bar that empties the cache.

Visit osamweb.com/tutorials for our latest how to guides.