Changing menu background color and tranparency

I’ve tried to find Answer on other topics, but the CSS presented mainly changed the text color, not the background.

What I’m trying is to find a CSS that can control the color and the transparency of the menu’s background

This is the top menu on my site right now

I’de like to change it to this one (its not texture, the backgropund is solid color with transparency)

the menu CSS I already implemented are:

/*make menu stick to the side and align in 1 line */
@media (min-width: 992px){
	.site-header .col-md-4 {
    	width: 50%;
	.site-header .col-md-8 {
  	  width: 180%;

/* main menu font size */
#mainnav ul li a{
  font-size: 19px;
.site-header.fixed {
    position: fixed;

Hello there,

You can use CSS RGBA color value like this one:

.site-header {
  background-color: rgba(0,0,0,0.5);

0.5 is the transparency level which equals to 50%. The value ranges from 0 to 1. 1 is solid.

To find out the RGB number of a hex color, use this tool.

Hope this reply helps.


perfect, thanks alot

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.