---
title: "Customizing the Classic Header Navigation Colors (Default Header, Transparent Header, Sticky Header)"
source: "https://docs.nexcess.com/software/kadence/theme/customize-header-navigation-colors/"
description: "When using the Kadence Theme Classic Header in the WordPress Customizer, you have several options for setting Navigation Colors. You can customize the default n…"
vertical: "Software"
area: "Kadence Theme"
date: "2020-11-06"
last_modified: "2026-07-02"
---

# Customizing the Classic Header Navigation Colors (Default Header, Transparent Header, Sticky Header)

When using the **Kadence** **Theme** **Classic** **Header** in the **WordPress** **Customizer**, you have several options for setting **Navigation Colors**. You can customize the default navigation colors, the transparent header navigation colors, and the sticky header navigation colors. Learn more about how to customize these settings using the header options below.

Default Header

The ***Kadence** **Theme** **Classic** **Header*** navigation colors can be modified for the **Default Header State** from the **Customizer -> *Header*** *settings.*

1. Click the gear settings icon beside the desired **Header Navigation Element** you wish to modify. (For example, the *Primary Navigation or the Secondary Navigation*).
2. Click on the **DESIGN** (tab) and find the **Navigation Colors** setting. Here you can set the colors of the current navigation. The available colors include the Initial Color, Hover Color, and Active Color.

![](https://docs.nexcess.com/wp-content/uploads/2026/06/Zight-Recording-2025-03-12-at-06.46.10-AM-3.gif)

These colors represent the **Default Header State**, meaning a non-transparent and/or non-sticky header. Learn about how to control the [Transparent Header](#transparent-header) and [Sticky Header](#sticky-header) Navigation Colors below.

Transparent Header

To customize the navigation colors for your **Kadence** **Theme** **Classic** **Header** when using a **Transparent** **Header**, go to the **Customizer -> Header -> Transparent Header** settings. Then click on the **Design** **Tab** and locate the ***Navigation Colors*** setting. Here, you can set the **Navigation Colors** for the **Transparent** **Header** state.

![Transparent Navigation Colors](https://docs.nexcess.com/wp-content/uploads/2026/06/Transparent-Navigation-Colors.gif)You can also adjust additional **Classic Header Transparent Elements**, such as the ones listed below.

- **Site Title Color**: Initial Color
- **Navigation Colors**: Initial Color, Hover Color and Active Color
- **Navigation Items Background**: Initial Background, Hover Background and Active Background
- **Button Colors**: Color, Hover Color, Background, Background Hover, Border, Border Hover
- **Social Colors**: Color, Hover Color, Background, Background Hover, Border, Border Hover
- **HTML Colors**: Color, Link Color, Link Hover
- **Transparent Header Background**: Desktop, Tablet, Mobile
- **Bottom Border**: Desktop, Tablet, Mobile

Sticky Header

To customize the navigation colors for your **Kadence** **Theme** **Classic** **Header** when using a **Sticky** **Header**, go to the **Customizer -> Header -> Sticky Header** settings. Then click on the **Design** **Tab** and locate the ***Navigation Colors*** setting. Here, you can set the **Navigation Colors** for the **Header** when in the **Sticky** state..

![Sticky Nav Colors](https://docs.nexcess.com/wp-content/uploads/2026/06/Sticky-Nav-Colors.gif)You can also adjust additional **Classic Header Sticky Elements**, such as the ones listed below.

- **Site Title Color**: Initial Color
- **Navigation Colors**: Initial Color, Hover Color and Active Color
- **Navigation Items Background**: Initial Background, Hover Background and Active Background
- **Button Colors**: Color, Hover Color, Background, Background Hover, Border, Border Hover
- **Social Colors**: Color, Hover Color, Background, Background Hover, Border, Border Hover
- **HTML Colors**: Color, Link Color, Link Hover
- **Sticky Header Background**: Desktop, Tablet, Mobile
- **Sticky Bottom Border**: Desktop, Tablet, Mobile