Transparent menu

Hey Edgar,

How are you doing today?

This should be possible by changing the background color value from hex to rgba and add transparency to it. To do that try adding the following CSS code in the style.css file of your child theme or if your theme doesn’t have custom CSS tab add it in your site using the following plugin:

https://www.ads-software.com/plugins/simple-custom-css

#mainnav .sub-menu li a {
    background: rgba(28,28,28,0.5);
}

This is the same background color as the one being used there just added with rgba, the last value (0.5) represents 50% transparency, 0 is completely transparent and 1 is full color so you can change it how ever you want.

Hope this helps ??

Cheers,
Bojan – WPMU DEV

Bojan thank you very much for the reply. Adding this code to “Simple Custom”, does not change me or menu or submenu.

I do something wrong?

Hey again,

Did you remove the code now, if yes please add it back so I can check if it is getting overridden by some other code.

Also where exactly are you adding the code and do you have some other code there as well?

Please advise,
Bojan

This is all that i have:

Simple Custom CSS

1. .site-info.container {
2. display: none;
3. }
4. a.roll-button.button-slider {
5. display: none;
6. }
7.
8. Or
9.
10. a.roll-button.button-slider {
11. display: none!important;
12.
13. }
14. #mainnav ul li a {
15. font-size: 14px;
16.
17. #mainnav .sub-menu li a {
18. background: rgba(28,28,28,0.5);
19. }
20. #masthead
21. {background-color: rgba (255, 255, 255,
22. 0.5);}

I did’t remove nothing. 17-22 doesn’t work

thanks alot

Hey again Edgar,

You’re missing a closing bracket (}) at line 16, please see screenshot https://screencast.com/t/QSkRMCJsBBf.

This is definitely preventing code below from being executed properly.

Hope this helps ??

Cheers,
Bojan

Perfect!! U resolve my problem!:) thanks alot!

Another question. If i use the same, for the menu (no submenu):

#mainnav .menu li a {
background: rgba(28,28,28,0.94);
}

I only can put color on letters and i have spaces without color. I want one complete line.

Can u help me?

Another time! Thanks!!

Hey Edgar,

That’s because you’re targeting links in the navigation, you can target their holder instead like this:

nav#mainnav {
    background: rgba(28,28,28,0.94);
    padding: 7px 0;
}

Hope this helps ??

Cheers,
Bojan

This generates a line in the menu. I mean a full line (the full width of the page).

You are a boss!

Hey again Edgar,

If you want a full width background for your whole header section you should use this one instead:

header#masthead {
    background: rgba(28,28,28,0.94);
}

This should be the result https://screencast.com/t/uOZ5wDlvv60.

is this what you’re looking for?

Please advise,
Bojan

Yes but no. That is a complete line but unifies the menu with the logo, I want the menu bar is narrow and independent of the logo. Also if i can move the logo down, was perfect.
Something like these:

https://screencast.com/t/ruRSXNv1OGS

Thanks Bojan

Hey again Edgar,

This is also possible but it will require some additional CSS tweaks as both of those elements are in the same holder so the only solution would be to pull out the logo out of it, please try adding this:

@media screen and (min-width: 1025px) {
.header-wrap .row .col-md-8.col-sm-4.col-xs-12:nth-child(2) {
    float: right;
}

img.site-logo {
    position: absolute;
}
}

This should be the result https://screencast.com/t/nz0gka7B4ZD.

Happy holidays ??

Cheers,
Bojan

Now yes! Thanks!!!! You are the best!

Happy holidays!!

Thanks for the kind words and glad I could help ??

Cheers,
Bojan – WPMU DEV

Morning Bojan! can you tell me how i can add one new logo to the center please? i want my menu at riht, one logo at the center, and another one at left.

Thanks alot!!
Kind regards!