How to Update Header & Footer Styles Using the Divi Theme Builder

NOTE:  The header changes in this tutorial are applicable to the Desktop header only. To change fonts and colors for the Mobile Menu, please see this tutorial on changing colors in the Responsive Menu plugin.

1. Change colors and fonts in the Desktop Header navigation

In the sidebar, go to Divi > Theme Builder > Global Header and click on the pencil icon to edit.

Because we have two overlapping headers, it will be necessary to enter the Wireframe View. Click the purple circle button at the bottom center of the screen to expand the menu (if it’s not already expanded) > Select the icon on the far left that looks like a rectangle with two squares below it.

Once in the Wireframe View find the section labeled Desktop Header > open the Menu module on the left side by clicking the gear icon.

Menu Text

Select the Design tab > open Menu Text > Active Link Color > select color from the palette.

Scroll down to Menu Text Color and you should see two tabs above the color palette. The left is selected by default and has a computer icon indicating Desktop. The right is grayed out and has a pointer arrow icon indicating Hover. Select the pointer arrow to open the palette for Hover color options. Select your desired color from the palette.

While under Menu Text > update your Menu Font, Weight, and Menu Text Size as desired.

Dropdown Menu Text

Still under the Design tab, close the Menu Text section and open the Dropdown Menu section.

Scroll to Dropdown Menu Text Color. Under the Desktop tab (computer icon), select the desired color. Under the Hover tab (pointer arrow icon), select the desired color.

Scroll down to Dropdown Menu Active Link Color and select the desired color from the palette.

Hit the green checkmark button to Save changes to the module.

Apply Changes to the Right Menu Module

To apply these same settings to the right-side Menu Module, we’ll use a shortcut.

Reopen the left-side Menu Module > Design tab > expand the Menu Text settings, and click on the three blue dots on the right. In the flyout menu that opens, select Copy Menu Text Styles. Exit the module by clicking on the red X button.

Still in the Wireframe View, hover over the right-side Menu Module, and click the three dots on the gray frame. In the gray flyout menu that opens, select Paste Menu Text Settings.

Repeat these steps for the Dropdown Menu section of both the left and right Menu Modules.

Save the Layout before exiting. Refresh on the front end to preview changes.

2. Change colors and fonts in the Footer navigation

In the sidebar, go to Divi > Theme Builder > Global Footer and click on the pencil icon to edit.

Footer Background Color

To change the background color, move your mouse to the upper left corner until you see the blue Section frame appear. Click the gear icon to open the Section settings.

Open Background and select the desired color from the palette.

Hit the green checkmark button to Save changes.

Footer Fonts

With the Global Footer still open, hover over the Home link and open the module by selecting the gear icon.

Select the Design tab > Text > Text Font and update the settings as desired.

Still under Text > Scroll to the Text Color section and change to your desired font color.

With the Text Module still open to the Text settings, click on the three blue dots on the right. In the flyout menu that opens, select Extend Text Styles.

In the To dropdown box, select All Texts. In the Throughout dropdown box, select This Row. Hit the blue Extend button. Once the module refreshes hit the green checkmark button to Save changes.

Instagram Handle Font

Open the Text Module for the “@yourhandlehere” text by clicking on the gear icon > Select the Design tab > Text > Text Font and update the settings as desired.

Still under Text, scroll to Text Color and update as desired.

Hit the green checkmark to Save the module settings.

Save the layout before exiting.