Transparency in sub-menu


How can I change the submenu background?

The topmenu in the header bar works a supposed. But when I create a submenu, which appears if I hoover over the menu items, this submenu is displayed in a black background rectangle.

I have changed the transparency of the header background as described in your support forum, but now these black rectangles are much more visible.


Hello Jan,

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

#masthead .main-navigation ul ul {
    background-color: rgba(28, 30, 33, 0.5);

Feel free to chnge 0.5 part from 0 to 1, it’s transparency.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

Great! This works indeed very well.
But it introduces a new phenomenon…:frowning:
On the pages, with a white background color, the white text in the transparent rectangle makes it impossible to see this submenu when hoovering over this menu in the header bar.
So I had to upgrade the transparency from 0.0 (full transparency) to 0.1 (slightly transparent).
If I am able to change the color of the text in the menu and submenu from white to ‘smudge grey’ than that text will be visible on the white background of the pages.

Understand I am a no-no when it comes to WP. I’m building my own website now and like to learn more about manipulating WP. Once I have Astrid in my fingers I will upgrade to Astrid Pro to make full use of what WP allows me to do on my website.

By doing this, reading the forum, FAQ and suggestions on your website, I get a kind of ‘on-the-job’ training getting me to understand the bigger picture.

As said, I really appreciate your prompt and professional support!
Thumbs up!


Great! Feel free to create a new topic if you need more help.

Kind Regards, Roman.