Transparent Main Menu

[Florian]

Hi,

how is it possible that the main menu background is transparency-gray at the beginning and after scrolling it changes the transparancy to darkgray (no transparancy).

I found this:

COPY CODE

.navbar-transparent #header .is-sticky .kleo-main-header {
	background-color: rgba(0,0,0,0.4) !important;
}

COPY CODE

.navbar-transparent .navbar .kleo-main-header.header-scrolled {
background-color: #000;
}

Thank’s!

[sharmstr]

That code should work, but change #000 which is the code for black to a darkgray of your choice: http://petermartinconsult.supanet.com/computer/webpages/grays.htm

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Florian]

Hi,
thanks for your reply.

I know the Hex Color Codes. I took only black for example in the code 😉

I tested again the css code and it is not working together.

.navbar-transparent .navbar .kleo-main-header.header-scrolled {
background-color: #000;
}
.navbar-transparent #header .is-sticky .kleo-main-header {
background-color: rgba(0,0,0,0.4) !important;
}

If I use the code separately, it work perfektly:
Only this:

.navbar-transparent #header .is-sticky .kleo-main-header {
background-color: rgba(0,0,0,0.4) !important;
}

or only this:

.navbar-transparent .navbar .kleo-main-header.header-scrolled {
background-color: #000;
}

but I need it together.

How I mean:
1. You load the website. => Menu is transparancy.
2. You scroll down the website. => Menu changes from transparancy to full color.

Example is attached 😉

Attachments:

You must be logged in to view attached files.

[sharmstr]

Give this a try

COPY CODE

.navbar-transparent #header .is-sticky .kleo-main-header.header-normal {
background-color:rgba(0,0,0,0.4) !important;
}

.navbar-transparent #header .is-sticky .kleo-main-header.header-normal.header-scrolled {
background-color:black;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Florian]

It is not working.
It is all the time with this code transparancy (half dark gray). It changes not to a full color by scrolling.

[Florian]

I have the solution:

COPY CODE

.navbar-transparent #header .is-sticky .kleo-main-header.header-normal {
background-color:rgba(0,0,0,0.4);
}
.navbar-transparent #header .is-sticky .kleo-main-header.header-normal.header-scrolled {
background-color:black;
}

Thank you for your effort.

[sharmstr]

Right. I forgot to remove the !important when I copied from above. Sorry about that.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[apeedks]

Hello

On similar subject –

I want the header to be transparent black not standard invisible. Currently we see the header only when we scroll down.

For example https://www.uber.com/ has the invisible header (without the white outline .

Thanks

Dee

[Author]

Posts