Menu background change along page

[nualexan]

Hello!

I would like to make a menu that changes along the same page - when we scroll down the menu change from transparent to solid color.
To explain better, here’s a page example with a menu that i would like to replicate: https://layerslider.kreaturamedia.com/?platform=wordpress
Thanks in advance,

Nuno

[paul.r]

Hi,

We need to see the current state of your site header to be able to provide some recommendation on how to replicate it.

Can you provide us your site url.

Thanks

[nualexan]

Hello!

I’m just in the beginning, but here it is the URL.
I’ve allready discovered how to shrink the header (one of the things that wanted to do).
Now i just need to change for a more solid backeground color.
Best regards,

Nuno Marques

[nualexan]

Sorry… now with the URL:

http://cervejavadia.pt/novosite2018/

[christian]

Hey Nuno,

When the bar is fixed, a class is added to it and that class is x-bar-fixed. You need CSS to add background to that class. Here is the CSS you need to add to your Header CSS.

.x-bar-fixed {
	background-color: red !important;
}

Hope that helps.

[nualexan]

@christian_y

ss is added to it and that class is x-bar-fixed. You need CSS to add background to that class. Here is the CSS

Hello Christian,

As i put the CSS in the Header, the red color stays along all page.
I wanted to make a transition from transparent (beginning of the page) to other color (when start to scroll along the page).
Please take a look at this website. It has the menu that i want to replicate:

https://layerslider.kreaturamedia.com/

Best regards,
Nuno

[jade]

Hi Nuno,

Please go to the header builder bar settings and make sure that you have the Sticky Bar option enabled and that the background color is initially set to transparent.

Then add this code in the custom CSS:

.x-bar-fixed {
    background-color: hsla(0, 52%, 60%, 0.5);
}

In case you’e still not able to figure it out, please provide the admin details to your site.

Thank you.

[nualexan]

Hello Jade,

Syicky bar is enabled…
How can i send the admin details?
Thanks a lot.
BR

Nuno

[jade]

Hi Nuno,

You can post the admin credentials in a Secure Note which is the key icon that is under your replies.

Thank you.

[nualexan]

Just send it!
BR

[jade]

Hi Nuno,

You’ve set up the header correctly, we just need to update the CSS code to:

.x-bar-fixed {
    background-color: hsla(0, 52%, 60%, 0.5) !important;
}

I went ahead and update the code. You should be able to see the background color changes when you scroll.

[nualexan]

Thank you!
Can you explain me the changes that you made so that i understand and can replicate next time?
Br

[nualexan]

Sorry,
I’ve seen what you did!
One more thing… is there any possibility to make transiction to other header menu?
For example, have one header with text menu and then make transition to an icon menu, so that it stays really small.
Thank you very much.
BR

[jade]

Hi Nuno,

I’m sorry but I am not sure what you mean. Would you mind clarifying?

Thank you.

[nualexan]

@Jade

sure what you mean.

Sorry
In this case we just changed the background color.
What about if i wanted to change the entire aspect of my menu?
Would that be possible to have one header in the begining of the page and then, when we scroll chang for a different header?
I don’t have any concrete example, but supose that i want to change from the menu that i have now to a hero menu only with icons (no text).
I hope i’m more clear this time
Best regards and thanks for your time!

[christian]

Yes, that is possible. Disable the sticky option of your first bar and create another bar with your alternative elements and set it to sticky. Then, set it to Hide Initially under the Sticky Setup. Here’s an example.

Thanks.