text color and background color of submenu items

Interesting, this looks like it could be a bug.

I managed to work around it as follows:

In the Site Editor’s ‘Styles’ tab, I opened the ‘Blocks’ panel. I then searched for the “Custom Link” block and selected that block. I expanded the “Advanced” panel at the bottom, and added the following CSS code:

background-color: #38629F !important;
color: #FFFFFF !important;

(Note that these are example colors, taken from the “Maelstrom” variation of the Twenty Twenty-Four theme.)

Let me know how that goes! I’ll try to find out if this is a known bug and will otherwise report it.

Hi @bernhard-reiter,

Thank you for your reply. I tested the CSS code as you explained, and it works well (although a message ” There is an error with your CSS structure.” appears when I add the CSS in the advanced panel).

But it would be good to have a solution that is independent of the selected style variation.

Hey @jpgoem,

I was just pointed to a better solution by a developer who’s been working on this feature: Rather than changing the block’s style via the ‘Styles’ tab, click on the Navigation block as it appears in the template you’re editing in the Site Editor, and open the block inspector panel. There are some dedicated controls for the submenu background and text colors:

For what it’s worth, I agree that the submenu colors should be directly set by the style variation. Developers are aware; I hope they’ll eventually find some time to address this!

By the way, this seems to be the relevant issue in Gutenberg’s issue tracker.

Hi @bernhard-reiter,

Thank you for this additional solution and info. A good thing is that now the text and background colors are consistent with the style variation.