Adding transitions destroys responsive design...

[Bluesman]

Hi Pablo or other... I have a problem with two layout grids that I use for header in this website I started. Worked very well until I started to add "transitions". You can see what I mean when schrinking the size of the browser... the objects and menu in the header (layout grids) jumps out of order...?
The transitions I use are sliding in from the sides and start is a bit outside the width of the page.
If I schrink the page and refresh the browser, the objects appear on the right place again.

Website: https://www.chevere.ec/gruporepcon

Any ideas to avoid this behaviour are welcome

[Pablo]

This is logical behvaior, because the scroll transaction place the item outside the viewport.
In the page properties, you can set overflow-x to 'hidden', to hide the scrollbar.

[Bluesman]

This is logical behvaior, because the scroll transaction place the item outside the viewport.
In the page properties, you can set overflow-x to 'hidden', to hide the scrollbar.

Hi Pablo...tnx for rapid answer as usual I set overflow-x to hidden in the master page where the headers are... it did hide the scrollbar, but the objects in the header still loses there responsiveness when schrinking the page...

If you scroll down so the transitions fullfill movement and then you schrink the size of the browser the header acts correctly...

[Pablo]

If you need further assistance then please share a DEMO project.

Note: I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.

Please see this FAQ for further details:
viewtopic.php?f=10&t=82134

[Bluesman]

If you need further assistance then please share a DEMO project.

Note: I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.

Please see this FAQ for further details:
viewtopic.php?f=10&t=82134

Ok Pablo... I was thinking of this from the beginning, but I use a 3rd party extension from (late [rz]) called "[rz] Top Slider". I wanted you to see this working in original from the beginning. So now when removing this extension the page works correctly with responsiveness.
I have to figure out how to do this function when scrolling the page that hides the upper header and the second header stops (sticky) at the top.
Do you have another solution for this?

[Pablo]

You can also use scroll transitions to show/hide objects on scroll.

For example:
https://www.wysiwygwebbuilder.com/suppo ... veler.html

[Bluesman]

You can also use scroll transitions to show/hide objects on scroll.

For example:
https://www.wysiwygwebbuilder.com/suppo ... veler.html

Ok... tnx Pablo, will try that. Does any of your templates demonstrate this? Just in case you remember... otherwise I will search through them

[Pablo]

The 'Timer Traveler' template uses scroll transitions to hide the header on scroll (via opacity).
https://www.wysiwygwebbuilder.com/suppo ... veler.html

[Bluesman]

The 'Timer Traveler' template uses scroll transitions to hide the header on scroll (via opacity).
https://www.wysiwygwebbuilder.com/suppo ... veler.html

Ok... Muchas Gracias... that was the one I looked for the slides I done for the sideways, so have that downloaded.
Thanks again Pablo

[Bluesman]

Sometimes you feel stupid... this is such a time I was thinking to much. Was just to make the second header (Sticky)... no transitions at all
I was taking for given... the second header would jump up over the first when doing this. So did not even test
Now works perfect...