Change the Dropdown Menu Colours (Text & Background) in Kadence

Below are the following “step by step” instructions to changing the Dropdown Menu Colours (Text & Background) in the Kadence Theme of your WordPress website.

Changing the colours of your dropdown menu in WordPress improves usability & visual hierarchy, brand identity & consistency, clear hover & active status and accessibility for the reader.

To Edit:

• For a visual experience, please click below for the video on my YouTube channel,
• or scroll down further for the written instructions.

Global Colour Palette

Ultimately, your dropdown menu colours will be controlled by your “Global Colour Palette“. You can access this setting by logging into your WordPress Dashboard.

• Hovering on “Appearance” and Click “Customse”
• Click on “Colours & Fonts”
• Press “Colours”

There are 3 different colours palette’s you can create in this section and will keep some consistency across your website.

These are either installed with a Kadence Starter Template, base theme, or created by you. However, there are occasions where you might want to change them separately from the other colours across your site, which is where below comes in handy.

Accessing the Dropdown Menu Settings

From the Main WordPress Dashboard menu on the left hand side:

• Please hover on “Appearance” and click on “Customise”
• Press “Header”
• Click “Primary Navigation”
• Scroll to the bottom and click “Drop-down Options”
• Up the top, click on the “Design Tab”

There are two settings up the top of the page here:

• Dropdown Colours (Text)
• Dropdown Background (Behind the Text)

Each setting has an availability to change:

• Initial Colour
• Hover Colour
• & Active Colour (show once the dropdown has been clicked)

I suggest playing around with the different colours until you find one that suits your brand and makes it easy to read. However, please keep the following in mind:

• High Contrast: Use a dark text colour (like dark charcoal or navy) on a light menu background, or vice versa, so users can scan links instantly without eye strain.
• Limit the Palette: Stick to your established 60-30-10 design rule, where background, primary navigation, and accent or hover states follow a unified system.
• Clear Hover States: Give dropdown items a distinct background colour change or underline when a user hovers or taps over them to show active focus.
• Check Accessibility: Run your background and text colour choices through a contrast checker tool like Adobe Colour to meet web accessibility guidelines.

Other Settings in the Design Tab

Apart from the Colours, you can also change the following in this section:

• Item Divider: Adds a horizontal separating line between each individual link or item inside your dropdown menu. You can customize its colour, thickness, and style (e.g., solid, dashed).
• Border Radius: Rounds the sharp corners of the main dropdown menu box. A higher number creates a more curved, softer look, while a setting of (0) keeps the corners perfectly square.
• Dropdown Font: Controls the typography for the text inside the dropdown. This lets you adjust the font family, size, weight (boldness), line height, and letter spacing.
• Dropdown Shadow: Applies a box-shadow effect behind the dropdown container. This creates depth, making the dropdown menu look like it is floating above the main page content.

Wrap Up

Once you’re happy with the colours you have chosen, just hit the “Publish” button and then the “Cross” in the top left corner to go back to the WordPress dashboard.

And then your done, but you can change them just as easy in the future.