Hi, I'm trying to do a menu like in http://yootheme.com/demo/wordpress (choose theme helios) after the menu disappear on scroll a new menu appear sliding from top.
If i look to the markup i see that as the same time where the class active appear a uk-animation-slide-top class appear. On my child theme i add that :
beans_add_attribute('beans_header','data-uk-sticky','top:-300');And it makes the menu disappear the time to scroll of 300px and then reappear sticky, so i think i need to have this class uk-animation-slide-top to have this nice effect, but only when the class uk-active appears ( i have tried to add it directly and it doesn't work).
And i don't know how...
Hey Alex,
You can add your animation in the sticky parameters, but also make sure to enqueue the animation uikit component which is part of core components and not add-ons. So make sure you have that in your enqueue callback function:
beans_uikit_enqueue_components( array( 'animation' /* more components you may have */ ) );Then you can add your animation as such:
beans_add_attribute( 'beans_header','data-uk-sticky',"{top:-300, animation:'uk-animation-slide-top'}" );Have fun,
Thank you! It's so simple 🙂
Alexandra can you please post the full code and CSS so we all can learn?