Transparent menu bar + some opacity on body text

Unite Theme
1

Hi,
I’m using the Unite theme and I would like to have my menu bar transparent so the background picture remains visible. In an old thread there were some answers (like adding this code: .navbar.navbar-default {
background: transparent;
} in the custom css page) but it didn’t work on my site :confused:

Also I’m wondering if it’s possible to have a partially opaque main page.
I’m building a website for some people who necessarily want to have a background image. Trouble is, when I do so the text is not easily readable, that’s why I wondered if i can opacify the text zone (like 50% opacity)…
I hope i explained my self clearly enough :confused: If not i’ll try again :slight_smile:

Thanks, Marie

2

Hi Marie,

I hope you are well today and thank you for your questions.

I’m using the Unite theme and I would like to have my menu bar transparent so the background picture remains visible. In an old thread there were some answers (like adding this code: .navbar.navbar-default { background: transparent; } in the custom css page) but it didn’t work on my site :/

That code is working fine on my test site.

Could you please share me your site URL where it’s not working so that i can troubleshoot it?

Also please try using the following CSS code.

.navbar.navbar-default {
    background: transparent !important;
}
Also I’m wondering if it’s possible to have a partially opaque main page. I’m building a website for some people who necessarily want to have a background image. Trouble is, when I do so the text is not easily readable, that’s why I wondered if i can opacify the text zone (like 50% opacity)

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Theme Options -> Other -> Custom CSS

body.home article {
    background-color: rgba(0,0,0,0.5);
}

Or

body.home article .entry-content {
    background-color: rgba(0,0,0,0.5);
}

Best Regards,
Movin

3

Hi Movin,
Thanks a lot for helping me out !
The first bit of code you gave me was pretty much the same as the one i’ve found in the old thread, except the “¡important” part, which didn’t change anything.

Thanks a lot for the “body.home article .entry-content {
background-color: rgba(0,0,0,0.5);
}” trick that i’ve somewhat adapted to my own needs !

I’m joining a screenshot so you can have a look at my home page with its desesperately opaque menu bar :wink: (out of discretion for “clients” i’d rather not communicate the URL)

Regards,
Marie

4

You are most welcome here :slight_smile:

I’m joining a screenshot so you can have a look at my home page with its desesperately opaque menu bar ? (out of discretion for “clients” i’d rather not communicate the URL)

Could you please try using the below CSS code?

.dropdown-menu,
.navbar.navbar-default {
    background: transparent !important;
}
5

Hi,

I’ve just tried it and again it didn’t work.
I’ve also tried to change the first come, right after “.dropdown-menu,” by a “.”, a “;” or nothing at
all but it didn’t work either…
I’m joining a file where i copied the entire css (style.css)… Don’t know if it’s useful !

Thanks again :slight_smile:

6

Heyyyy

It worked !!! I don’t know why but it suddenly worked :slight_smile:
So THANKS A LOT :slight_smile:

I have another problem but i’ll create a new topic for that one (but check first it hasn’t been treated yet :p)

++
Marie

7

You are most welcome here :slight_smile:

Sure i will answer your another question on your newly created topic ASAP.