Support » Themes and Templates » Change menu background to transparent?

  • Resolved HannaMedL


    I’ve tried to change the menu background – the white bar round the buttons – to transparent (in the styles editor) just like the logo in my website. No success … Anyone who can help me with the code? I use the Fruitful theme.
    My website:


Viewing 7 replies - 1 through 7 (of 7 total)
  • Sorry – the white space around is now turquoise in the example … I have the same problem though.

    you might have to play with the color.
    here an rgb color picker
    color picker

    the last number in rgba is for alpha or transparent the lower the number the the more transparent 1 would be completely solid and 0 would be completely transparent.

    .main-navigation {
    background-color: rgba(52,184,192,.5);

    Do not edit the theme itself. First create a child theme for your changes. Or install a custom CSS plugin.

    I have a custom CSS plugin (it would be a disaster if not) 🙂 It works fine changing the color of the menu text and the buttons, etc, but it seems impossible to get it transparent, and especially the space around. I didn’t work with the example above but I’ll try to play with it tomorrow. Thank so much for your time! I get back here if I find a solution. (Excuse my swenglish …!)

    Yes!! It worked with this:

    .main-navigation {
    background-color: transparent;

    Perhaps I didn’t let the page reload properly.

    Thx! Works great!


    Thank you very much! I needed the adjustable opacity. Your above solution worked flawlessly. I am using the Fruitful theme.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Change menu background to transparent?’ is closed to new replies.