Staff replied SP Page Builder

Make topmenu show up again after scrolling down...

Asked by Anders Wiik 5 years ago Last activity 5 years ago

Hello.

I have a topmeny that is position: Relative and has a transparent background.
The menu works fine when scrolled 100% to the top of the page since the background is dark and text is white.
When scrolling down x pxs I'd like the menu to show up again bbut with a background color and the links with a new color.

Here is what I try to achieve:
https://partillecup.com/sv/

As you can see the many has white text and transparent background but when scrolling down it appears again in new design.
Is it possible to do this in pagebuilder?

/Anders

8 replies

Paul Frankowski Senior Staff

5 years ago

Hi,
it's possible - with Helix Ultimate template, we used this effect many times in our templates.
Just check the last two, Podcast and Wimble.

But SPPB wasn't in general designed for this.
It's navigation addon don't add extra class name after page scroll-down.

Paul Frankowski Senior Staff

5 years ago

In Template options > Basic > Header > Sticky Header: Yes

Anders Wiik Asked this

5 years ago · edited

Yes, I knew about how to make a it fixed 100% as your second answer.
I use the ultimate template today. Where can I make the changes needed?
I know how to set it fixed. But the color changes? I feel there need to be some more code?

Paul Frankowski Senior Staff

5 years ago

Use custom CSS using this class

#sp-header.header-sticky

example:

#sp-header.header-sticky .container 
{background: white !important; box-shadow: 0 2px 4px rgba(7,37,68,.06);}

#sp-header.header-sticky .sp-megamenu-parent > li > a 
{color: black;} 

#sp-header.header-sticky .sp-megamenu-parent > li > a:hover 
{color: red;}

Anders Wiik Asked this

5 years ago

Awsome!

That's nice. It worked great but I realized the width of my header layer was not fluid so I changed to fluid width in my template layout settings.
Now the color of the text changes color but the first but the background color doesn't.
Any guess why?

What is triggering the switch between the two css? Can I moderate the timing?

Paul Frankowski Senior Staff

5 years ago

Now looks OK, only maybe red shadow is too big.

Anders Wiik Asked this

5 years ago

Yes, I managed to figure out how to make it white.
Is there any code I can change so that the white background menu shows up later? I mean after scrolling som distance....

Paul Frankowski Senior Staff

5 years ago

Probably yes somehow but not easy, extra customization is needed. Personally I cannot help.

In the docs