Transparent logobar in renew

[fatcatgraphics]

Hi, Im trying to make the logo bar transparent in renew. But it will only work if i make the entire site transparent. Im using the following css:

.x-logobar {
background-color: transparent !important;
}
.site {
background-color: transparent;
}

If i remove the .site css then it doesn’t work. How can I make just the logobar transparent?

The site is longislandshuckingtruck.com
Actually, if I can make just the blog page entirely transparent but the rest of the pages white, with the transparent logobar that would be ideal.

Thanks!
Rena

[christian]

Hey Rena,

The header is inside the site container so it is not possible to make it transparent without making the site transparent too.

What we could do here without getting into template customization is to move the masthead outside the site container above the x-root container in order for it to be separated without breaking. You will need to add this code in X > Theme Options > JS

jQuery('.masthead').insertBefore('.x-root');

Now, to make the site container transparent only on the blog page, you can change your CSS to this.

.home .site {
background-color: transparent;
}

If in the future you want to set a static page as your home page and set a page as your post page, you will need to change .home to .blog.

Hope that helps.

[fatcatgraphics]

Thank you! That worked

[Prasant]

You are most welcome.