How To Fix Not Being Able To Edit Submenu Colors, Above and Below Header?

Submenu colors in Astra are set from different places depending on which header is in use, and the options are only visible when the right plugin and module are active. This guide covers where to find those options and what to do when a color change does not show up on the frontend.

Before you begin:

A few things determine whether the submenu color options appear in the customizer at all.

• Astra theme and Astra Pro Addon updated to the latest versions.
• Activate the Colors & Background module from WordPress Dashboard > Astra > Dashboard.
• Clear any caching plugin cache and browser cache before checking the frontend.
• Submenu colors for the Transparent Header are available in the free version of Astra.

Note: Submenu colors for the regular header require Astra Pro with the Colors & Background module active. Upgrade here.

Change Submenu Colors for the Regular Header

If the submenu on your normal header uses the wrong text or background color, the options sit inside the menu element’s design settings.

1. Ensure the Astra Pro Addon plugin is installed and active on the website.
2. From your WordPress dashboard, go to Astra > Dashboard and confirm the Colors & Background module is active.
3. Go to Appearance > Customize > Header > Primary Menu > Design.
4. Scroll down to the Menu and Submenu Color section.
5. Use the Text/Link Color option to set the submenu link color, switching between the Normal, Hover, and Active states with the icons above the color picker.
6. Set the Background Color for the submenu container in the same section.
7. Click Publish to save the changes.

If you use a Secondary Menu or any other menu element, the same options are available under that element’s Design tab, for example Appearance > Customize > Header > Secondary Menu > Design.

Change Submenu Colors for the Transparent Header

Transparent Header has its own set of colors, and they override the regular header colors on any page where the transparent header is active. If the steps above had no visible effect, the page most likely uses the transparent header.

1. Go to Appearance > Customize > Header > Transparent Header.
2. Switch to the Design tab.
3. Scroll down to the Submenu Color option and set Text/Link and Background colors.
4. Click Publish to save the changes.

These colors apply only where the transparent header is enabled. Pages using the regular header continue to use the colors set under Appearance > Customize > Header > Primary Menu > Design.

Change Submenu Colors When the Sticky Header Is Enabled

With the Sticky Header module active, the header gets a separate set of colors that apply while the page is scrolled. A submenu that looks correct at the top of the page but wrong after scrolling points to these settings.

1. Confirm the Sticky Header module is active under WordPress Dashboard > Astra > Dashboard.
2. Go to Appearance > Customize > Header > Sticky Header and confirm the sticky header is enabled for the header row you are editing, such as Primary Header.
3. Go to Appearance > Customize > Header > Primary Menu > Design and open the Sticky state for the menu and submenu color options.
4. Set the Text/Link Color and Background Color for the submenu in the sticky state.
5. Click Publish to save the changes.

When Color Changes Do Not Show on the Frontend

Astra combines its CSS and JS into cached files, so a saved color change can occasionally stay hidden behind an older cached file. If you have made changes in the customizer and the submenu color is still not changed, please clear the cache as guided below:

1. Go to WordPress Dashboard > Astra > Dashboard.
2. Click Activate all or Deactivate all next to the module list to clear the Astra cache.
3. Hard refresh the page with Ctrl + Shift + R on Windows or Cmd + Shift + R on Mac.
4. If a caching plugin or a host-level cache is in use, purge that cache as well, since it is separate from the Astra cache.

Full details are in the guide on how to clear Astra’s cache.

Related Docs:

• Astra – Customize the Submenu
• How to Change the Menu Color in Astra Theme

If the submenu colors still do not apply after the steps above, feel free to reach out to the support team.