WIP: Sticky header transition settings not working

Bugs
1

Bricks Version: 1.5 (beta)

I’m trying to use the new sticky header transition settings to make the fade out a little more gentle than the current on/off style. But the settings I’m adding are having no effect.

Is the syntax the same as in the placeholder?

2

I confirm this

transition: background-color .2s,transform .4s

not be added in ID for header

#brx-header.sticky {
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 998;

3

image
image1800×154 53.7 KB

Strange, here it is working normally.

5

see this

1 Like
6

Got it, I tested it here with the slide-up active and really, it’s not working properly with the slide-up.

7

I confirm.
Similar issue has been reported before: WIP: Sticky header while scrolling doesn't use transition

This one seems to be fixed now, but this time, transform transition is not applied to correct element:

#brx-header.sticky>.brx-nestable {
  transition: background-color .2s,transform .4s;
}
8

nope, see the video from the top!

9

Hey guys,
Thanks a lot for your report(s)!

The transition should apply to the background color (on scroll), the text color (on scroll) and of course to the slideUp animation. The latter is currently not the case but is already fixed in my dev version.

Best regards,
timmse

10

For me it seems like the transition is always on. I don´t remember activating any transition for the header but it is set to: animation-duration-very-slow fadeIn…
Can I get rid of this? It is anoying that every time someone clicks a link the header is reloaded “slowly”… I really can´t remember turning on this option.

11

Hey, can you provide a link?

12

Well, it´s a small site still under development but I will remove the under construction page and password lock for a moment so that it is live for investigation :slight_smile: www.bushguide101.com

13

There is a default transition, that can be overridden by adding the values of your choice or even be resetted if you insert none into the box :slight_smile:

Before (default settings):

Bildschirmfoto 2022-07-08 um 09.14.07
Bildschirmfoto 2022-07-08 um 09.14.07707×147 40.7 KB

After:
Bildschirmfoto 2022-07-08 um 09.14.32

Best regards,
timmse

14

I seem to be having trouble with sticky positioning in the Layout options inside the Style tab. Ive set a section to Sticky with Top 0 and it doesnt work, has anyone else come across this using 1.5 beta?

15

Hi Mike,
this won’t work inside the header, because the setting under Layout doesn’t affect the header wrapper, only the inner element.

Unfortunately, the header wrapper is currently added “automatically” and cannot be edited within the builder.

But we are working on a solution to make this more flexible.

1 Like
16

Im trying the transition again with the slide up effect on sticky header.

But no transition is applied, as i can see in css, it add and remove an overflow hidden which can’t work with transition.

is there any fix for that ?

17

Hi,

can you please record a video showing how you set up transitions, so I can try to recreate it locally?

Thanks,
M

18

I will try byt what i see is that the scroll up / appear , add remove overflow hidden, which seems not to be compatible with transition/animation