Need transparent background on media too!


#1

Hello there,

Could you please provide me the css code to make the header menu transparent instead of white or any other colour. thank you !


#2

Hi,

Use custom css code below:

.site-header.float-header {
    background-color: rgba(0,0,0,0.9);
}

and change last value 0.9 to some lower value (0.0 will be full transparent).


#3

Sorry, I guess I did not make it clear the first time. It seems that with the update there is an extra white header added to the top menu. I need a css so that the top menu remains transparent on top of the slider but I still need the top menu to turn black when scrolling down. I hope I am making it clear this time.

Thank you so much for all your help !


#4

Hi,

Can you share your page link with us, is it this one? We have to inspect it in order to generate necessary css code.


#5

Advinor.com


#6

Hi,

Ok, but your header is already transparent on top http://screencast.com/t/7xlxyDlu62 ?

If you want to make it transparent over entire slider section you have to edit theme folder / js / main.js and to increase this value to maybe 400 http://screencast.com/t/4PabY77P

After modification, minify this file with this tool http://jscompress.com/ and overwrite main.min.js which is loated inside same folder.


#7

Thank you ! Yes but my header is not transparent on cell phone and tablet. I need it to be the same way it shows up on the desktop.


#8

Hi,

Header on mobile is static by default so setting it to have transparent background will reveal white background of page (like this header is above slider).

You can try custom css code below, but this can produce strange results on some touch devices:

@media only screen and (max-width: 991px) {
    .site-header {
        background-color: transparent;
    }
    .site-header.fixed {
        position:fixed !important;
    }
}

And result should look like this http://screencast.com/t/wW3O1jRQM


#9

Doesn’t seem to be working ? See how its looks on phone


#10

Screenshot of my phone


#11

Appreciate all your help ! Thanks a ton again.


#12

Hi,

Mentioned “strange results” are exactly that. Position fixed wont work on some devices like on IOS 4, and that is why default mobile menu positioning on most themes is set to static. You can read this article for example http://bradfrost.com/blog/mobile/fixed-position/

I tested your page on android device and it is working, so you have to decide will you use provided css or not. For some users this will work for others it will not.


#13

Thank you ! All good.