Elementor Sticky Header

Author Posts

Lincsdigital April 10, 2019 at 9:44 am

Hi Sebastian

I am creating a sticky header with elementor, but cannot do everything in elementor, change text colour on scroll.

Is this something I can do with microthemer? If so could you advice on it?

This is the code I have already put into custom CSS panel.

selector.elementor-sticky–effects{
background-color: rgba(255,255,255,1)!important }

selector{
transition: background-color 1s ease !important; }

selector.elementor-sticky–effects >.elementor-container{
min-height: 80px;
}

selector > .elementor-container{
transition: min-height 0.5s ease !important; }

Please let me know if you need more information.

Any advice would be great.

Thanks

Pete

jjjas August 3, 2019 at 1:53 pm

I am also curious. Thanks for bringing this up!

Sebastian August 4, 2019 at 11:18 am

@Lincsdigital – I’m so sorry for not replying, I somehow missed your message back in April. I never deliberately ignore support requests.


@jjjas, thanks for reviving this!


@Lincsdigital perhaps this issue has been solved already, but if not, can I just check that you are using the word “selector” above as a way of describing the code to me, rather than the code actually container the word selector? If it really does container selector, that might be the source of the problem.

So this: 

selector.elementor-sticky–effects{
background-color: rgba(255,255,255,1)!important }

Would actually be:

.some-real-class.elementor-sticky–effects{
background-color: rgba(255,255,255,1)!important }

If this issue is still active, please could you send me a link to the page where you tried to transition the background -color and height? The code looks like it should work if the selector is correct, but I can only tell so much from looking at code by itself.

Thanks,
Sebastian

You must login or register to reply to this topic.