I have made a custom navbar with a mega menu dropdown inside a symbol object. When I navigate between pages the objects inside the navbar does not load simultaneous, making the objects inside the navbar jump sideways as objects load. Anybody have some tips on how to avoid this as it looks a bit messy?
To add to this, the browser scroll bar also load/unload with a delay, making the sideways jumping worse. Is it possible to force the browser to always show the scroll bar even on pages where a scroll bar is not needed?
Instead of fighting it, if you don’tfind a better solution, make any difficultly loading element hidden by default and use an IX to delay their apparition, making them smoothly appear with an opacity ramping after a delay of 100 or 120ms.
EDIT:
The whole original problem (see first post) with the objects not load simultaneous inside the navbar seems to be because the navbar was inside a symbol object… @Waldo: is this a known limitation? I do not think it was like this before.
@vincent Hm, looks like IX is not very compatible with objects inside symbol objects. When I add a page load trigger that fades in the navbar (inside a symbol) with a delay after the page starts to load, its visible for a short while, then disappears, than fades in. If I take the navbar out of the symbol object, it works correctly. Do you know if this is a bug or a feature?
The IX kicks in after the element has loaded. That’s probably because you’re using its hidden state as a default state action at the start of the IX. To avoid that, you can give the hidden property (opacity:0 most likely) inside of the designer, in the style panel. Then your IX starts with a reveal action.
I’m only using opacity to hide the navbar. When I unlink the navbar from the symbol element the IX applied to the navbar works as intended. When the IX is used on a class/element inside a symbol element, it seems to load before the IX is applied. Could somebody from Webflow comment on this? The sites is going to have a lot of pages, not having the navbar in a symbol element is not an optimal solution!
I’m not saying not having the navbar in a symbol at all, I say to hide it inside of the designer directly, instead of relying on the first action of the IX to do so.
Probably Webflow could do something about it, but this is as is for as long as I’m working with webflow (5+ years) so obviously this isn’t a priority.