Transparent Header

Travelify
1

Hello,

I am building this website for a client and the client wants to have a transparent header field. We wish to keep the header logo in it’s place, but remove the white so that we can see the background image behind the logo.

Thanks!

2

You can get this done by adding the following code to Theme Options - Other - Custom CSS

.wrapper {
    background: transparent;
}
#main {
    background: #fff;
}
#site-generator {
    background: #fff;
}
3

Hello Aigars,

Thank you very much for your prompt reply. I have copy and pasted the above code into my Theme Options - Other - Custom CSS, however after saving the changes and refreshing the page I do not notice a change. Do I simply copy and paste or is there anything else I might need to add?

Thanks,
Robert

4

I see that you have already set color via theme options for wrapper. So you need to override it by adding !important. I guess it should work just fine then. Here is how it should look

.wrapper {
    background: transparent !important;
}
#main {
    background: #fff;
}
#site-generator {
    background: #fff;
}
5

That worked like a charm my friend! Thank you for your hard work and excellent customer service. Would you kindly direct me to your donation link?

Regards,
Robert

6

Robert,

I don’t have donation link in place but the best option is still via PayPal where you can use my email/ID a.silkalns[at]gmail.com (replace [at] with @).

Thank you! I really appreciate it!

7

Thank you, Aigars! I have sent it over from Stonehenge Apparel (this is my paypal account).

I had a related question as well. If you notice on the same website:

There is a white wrapper around the body content of the website. And the content background is actually light grey. I am trying to change the white to be another color, or perhaps even transparent like we have done with the header.

When I go to ‘Appearance>Customize>Travelify Element Color’ it looks like “Wrapper Color” may be controlling this, but when I change the color the website does not respond. [edit: maybe this actually controls the header color which I have now set to invisible, thus no change is noticed?]

Is there a short code I can insert into Custom CSS as before? I would like to try colors and transparent to see what looks the best.

Thanks!

8

That option no longer works because we override is using Custom CSS.

You can make it transparent or change it to any color like this and it should work just fine.

#main {
    background: transparent !important;
}
9

You can also try to remove these lines

#main {
    background: #fff;
}
#site-generator {
    background: #fff;
}

We added earlier because these are ones that are making current background white. This way you won’t even need code I gave above.

10

Thank you for your donation! I really appreciate it!

11

No problem, and thanks for your help and good work! Your solution worked great. +++