[perisoyluParticipant]

Hi team,

I am trying for a couple of days now and I have posted this question in another thread and am waiting for a reply for two days now, so I thought I would try one more time:

I am trying to set the background color to transparent in x theme, however, it does not work in customizer, the background color seems to be white (frontend) or gray (backend). I want it to be transparent, so that I can actually play around with the opacity of the columns. Any idea what I can do?

I have already tried .site {
background: transparent !important;
}

No change.
Thanks!

URL: happycoollove.de

[ChristopherModerator]

Hi there,

Transparent background shows the background of container above it. But setting transparent background for body tag doesn’t make sense since there’s HTML tag above it and usually we don’t add background to HTML tag.

Hope it helps.

[perisoyluParticipant]

Hi and thanks for the reply.
So, does it mean that I cannot create a white transparent container? I thank you so much for your patience with my question!

[perisoyluParticipant]

I actually just found out that you can set the nav-bar to transparent and why then not the background? However, even when I change the nav-bar to transparent it appears white in the frontend. Why? I really want the nav-bar to be transparent and containers to appear transparent, when they are sliding over a picture in the background (paralax).

URL: happycoollove.de

Thanks for your kind support.

[LelyModerator]

Hello There,

Yes, current navbar now is transparent. When there’s not background set, it is white by default. We have few layers on your navigation. All of it is either no background or transparent. Navbar is transparent. It sits on a container with no background. This container sits on .site div with no background. Then it sits on the body tag with no background. That’s multiple layers. Default is white.

Now if you want the background of first section to put behind the navigation, please add this custom CSS on Appearance > Customize > Custom > Edit Global CSS:

.home .x-main.full {
    margin-top: -84px;
}
.home div#x-section-1 {
    background-position: 50% 0 !important;
}

Hope this helps.

[perisoyluParticipant]

Hi there,

Thanks for your reply. I added the custom CSS as suggested, however the navigation still is not transparent. The other question that still is not anwered:I would love to make some containers transparent. You mentioned that I do have a few layers on my navigation, do I have to remove any of them in order for the transparent command to work or would I have to add a background layer, because you mentioned when there is none the background is set white by default. I really would appreciate your help.
Thank you.

[Paul RModerator]

Hi,

You can try this code instead.

.home .x-navbar {
    position: absolute;
    width: 100%;
    box-shadow: none;
    border: 0;
}

Hope that helps.

[perisoyluParticipant]

Thanks so much. I added it, but the background is still white.
Is there something I am missing? Should I delete any of the code that I added earlier?
Thanks for your patience!

[JadeModerator]

Hi there,

The code suggested by Paul seem to be not present on the site as I have checked. I tested the code through the console and it eliminates the white background. Kindly make sure to add the code. In case the issue persists, kindly provide us with your admin details so that we could check your CSS code as it might have some errors.

Thank you.

[perisoyluParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Upon checking your site, I noticed there was a missing curly bracket, I went ahead and fixed it for you.

Hope it helps.

[perisoyluParticipant]

Hi!
Thanks that helped for the navbar! Yay! 🙂 However, the background still is white. Is it even possible to change the background color to transparent?

Thanks so much!

[ChristianModerator]

Upon checking, the navbar is already transparent. It looks white because the section’s background image is white at the top.

Thanks.

[perisoyluParticipant]

Thanks for the reply. I wasn’t even aware that I inserted a background image…How do I change that sections background image?

Thank you!

[JadeModerator]

Hi there,

To change the sections’s background image, go to the section settings and change the background image from there.

Hope this helps.

[Author]

Posts