Hi everyone,
I'm trying to assign several UI kit attributes to a navbar, to repeat what I was able to do with a static page, where I created a 'one-page' menu, using several UI kit components.
For instance, I assigned a data-uk-sticky attribute to a navbar, and then I also gave it several 'options' , like animation: 'uk-animation-slide-top' , clsactive: 'uk-navbar-attached' and showup: true , so that the code for the navbar, on the static html page ends up looking like this :
<nav class="uk-navbar" data-uk-sticky="{clsactive: 'uk-navbar-attached', animation: 'uk-animation-slide-top', showup: true}">
<a href="#" id="ymtest-01" class="uk-navbar-content"><img width="60" src="images/LOGO-22.png" alt=""></a>
<ul class="uk-navbar-nav" data-uk-scrollspy-nav="{closest: 'li', smoothscroll: {offset: 30}}">
<li><a href="#section-01">SECTION 01</a></li>
<li><a href="#section-02">SECTION 02</a></li>
<li><a href="#section-03">SECTION 03</a></li>
<li><a href="#section-04">SECTION 04</a></li>
</ul>
</nav>In my Beans childtheme's functions.php , when I add only one attribute and one option :
add_action( 'wp', 'custom_modify_child_theme');
function custom_modify_child_theme() {
beans_add_attribute( 'beans_menu_navbar_one-page-menu', 'data-uk-sticky', 'showup:true' );
}it works fine to make the navbar stick to the top and show up only on scroll-up.
But when I try adding other attributes, to either beans_add_attribute or beans_add_attributes, like this :
add_action( 'beans_before_load_document', 'custom_modify_child_theme');
function custom_modify_child_theme() {
beans_add_attributes( 'beans_menu_navbar_one-page-menu', 'data-uk-sticky', array( 'clsactive' => 'uk-navbar-attached', 'animation' => 'uk-animation-slide-top', 'showup' => true ) );
}then the functionality is lost. I tried both wp and beans_before_load_document hooks, but it doesn't seem to make a difference.
I looked through the documentation, and couldn't find anything that deals with this.
Any thoughts ?
Cheers,
YM
just do that:
beans_add_attribute( 'beans_header', 'data-uk-sticky', '{top: -100, animation: "uk-animation-slide-top"}' );although that animations nor working very good on my sticky header.
Hey Jochen,
I tried that. It still doesn't work.
Although, on my static site, the animation appears much better when it's used together with showup:true , compared to when it's used with top:-100 . When I give it the 'top' value, the animation is a little 'wonky', on the scroll-up to the very top.
Personally, I like the showup:true option. It clears the space and gives more room to the 'above the fold' screen area.
I find it makes a difference, especiallly on tablets, where the space gets cramped easily.
I tried all sorts of combinations here, but I couldn't get it to work. The animation is not showing at all.
I have registered it, and it shows up in my list of UIkit components :
Array
(
[components] => Array
(
[core] => Array
(
[0] => base
[1] => block
[2] => grid
[3] => article
[4] => comment
[5] => panel
[6] => nav
[7] => navbar
[8] => subnav
[9] => table
[10] => breadcrumb
[11] => pagination
[12] => list
[13] => form
[14] => button
[15] => badge
[16] => alert
[17] => dropdown
[18] => offcanvas
[19] => text
[20] => utility
[21] => icon
[22] => animation
[23] => flex
[24] => animation
[25] => contrast
[26] => overlay
[27] => thumbnail
[28] => modal
[29] => scrollspy
[30] => smoothscroll
[31] => animation
[32] => flex
[33] => close
[34] => modal
[35] => overlay
)
[add-ons] => Array
(
[0] => slidenav
[1] => dotnav
[2] => lightbox
[3] => slider
[4] => slideshow
[5] => accordion
[6] => slideshow-fx
[7] => sticky
[8] => tooltip
)
)
[themes] => Array
(
[default] => G:/xampp/htdocs/wp/wp-442-1044/wp-content/themes/tm-beans/lib/api/uikit/src/themes/default
[beans] => G:/xampp/htdocs/wp/wp-442-1044/wp-content/themes/tm-beans/lib/assets/less/uikit-overwrite/
)
)Not sure what's going on . 🙁
I got the animation to work ! 🙂
All I had to do was change the single and double quotes. I noticed that the static html site expects the single quotes inside the curly brackets, so I changed things around, to look like this :
beans_add_attribute( "example_primary_menu", "data-uk-sticky", "{ animation: 'uk-animation-slide-top', showup:true }" );Now the animation is showing quite nicely, when the navbar apears, on scroll-up.
Thanks again, Jochen, you pointed me in the right direction. Again 🙂
cool, you made it 🙂
But in that situations its easier to escape the single quote with an backslash before. Like that:
beans_add_attribute( 'example_primary_menu', 'data-uk-sticky', '{ animation: \'uk-animation-slide-top\', showup:true }' );I knew that !
Just couldn't think of it 😉
I just figured out the smooth-scroll for my one-page menu.
The problem was what I would call a 'naming confusion', which - IMHO - is a bit of an oversight on the part of the UIkit developers.
The component 'smooth scroll' is controlled by smooth-scroll.js , or smooth-scroll.min.js . Notice the hyphen - in the file name.
Now, to CALL the component's functionality on some page element, like an ul of a menu, and to combine it with the scrollspy UIkit component, this code works :
<ul class="uk-navbar-nav" data-uk-scrollspy-nav="{closest: 'li', smoothscroll: {offset: 30}}">Notice that the property smoothscroll is WITHOUT a hyphen.
This is what threw me. I assumed that the name which is used to register UIkit components and add-ons with Beans , with beans_uikit_enqueue_components would also be smoothscroll, without a hyphen.
Once I added the hyphen there , like this : smooth-scroll, the code started to work .
What made things even more complicated, is that the printed list of active UIkit components also listed smoothscroll without hyphen, even though that's a wrong name.
A little thing, but hard to spot.
I just thought I should give others a bit of a 'heads-up'.
Cheers,
Yuna M.
Good thing to point out.
Hey Yuna
It would be great if you post the finished result of the code and CSS. Thank you.