Transparent header background

I am struggeling with a problem in my header. At the moment the header have a grey background. When you scroll down the header turns transparent:

[Link to website][1]

That so be opposite. The menu should be transparent when the page is all the way up, and get a white background-color when you start scrolling down the page.

I have a feeling that it is something with the .fixed-header #header class. I tried to add the following codem, but that makes the text transparent, and not the background.

/* Menubar background */
.fixed-header #header {
    background-color: rgba(1,1,1,0.0) !important;
    opacity: 0.5 !important; 
    background-color: transparent !important; 
      }

Can anybody help me solve this problem?



try this:

.fixed-header #header {
    background-color: white !important;
}

EDIT: you should try jquery:

$(window).on("scroll", function(){

        if($(window).scrollTop() == 0){

        $(".fixed-header #header").css("background-color", "transparent");

        }

        else if ($(window).scrollTop() > 0){

        $(".fixed-header #header").css("background-color", "white");

        }

    });

I hope it helps, Regards.

You can use Jquery for this. When the menu is at the top of the page, it can have a default white color or whatever you wish, but then when you start scrolling down you can tell it to change the background-color to transparent.

See the example below.

Remove

background-color: rgba(255, 255, 255, 0.97);

from

.fixed-header #header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.97);
    z-index: 500;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

Try this

/* Menubar background */
.fixed-header #header {
background-color: rgba(1,1,1,0.0) !important; // remove this css
opacity: 0.5 !important; 
  }