Floating: Back to top and hamburguer

Hi!

I want to make a small floating back to top arrow (uk-icon-medium uk-icon-arrow-circle-up ) on the righ and bottom of the page. Similarly, I'd like to make a floating off-canvas icon (uk-icon-large uk-icon-navicon) on the left and top of the page.

Can you help me, please? I reviewed the forum, the docs and uikit documentation, but I couldn't understand how to do it properly.

Thanks in advance.

Sami

Hi Sami, I have used this for my back to top link:

<a href="#top" data-uk-sticky="{top:500}"  data-uk-smooth-scroll="{offset: 90}">back to top</a>

Mine is floating on the left but not completely at the bottom.

Thanks bas for helping, but...

I'm sorry, I can't understand how to apply that code.

Do I need to do something like:

add action

add atrubute

function

I also don't understand how can I insert the icon.

On the hamburguer menu, I presume it is active on the theme, but I can't see how to make the icon visible. I added widgets to the offcanvas menu, already.

An update.

I picked up your code, Bas, and I inserted it on the footer.

// Modify the footer credit right text.
add_filter( 'beans_footer_credit_right_text_output', 'example_footer_credit_right_text' );

function example_footer_credit_right_text() {

 return '<a href="#top" data-uk-sticky="{top:500}" ><i class="uk-icon-medium uk-icon-chevron-circle-up"></i></a>';

}

So, from here, I'd like to make it sticky. I tried with "data-uk-smooth-scroll" but it produced no effect. I'm probably doing something wrong...

Hi Sami, Make sure you have sticky added here:

beans_uikit_enqueue_components( array(  'sticky' ), 'add-ons');

An item becomes sticky when it enters the viewport. When you place it in your footer it will become visible in the viewport when you are at the bottom of your page so it will not really sort eny effect.

As a test try this:

add_action( 'beans_main_before_markup', 'back_to_top' );

function back_to_top() { ?>
<a href="#top" data-uk-sticky="{top:500}"  data-uk-smooth-scroll="{offset: 90}">back to top</a>

<?php }

You will see that the back to top link will be on the left 500 px from the top.

Bas

Thanks Bas,

It works. It actually works to position the icon for the off-canvas menu floating on the left.

I'm experimenting...

Cheers! Sami

Hi Guys,

Do you know how to ad data-uk-smooth-scroll to the main menu items?

Cheers,

Mike

Nevermind guys i found the solution:

beans_add_attribute("beans_menu[_navbar]","data-uk-scrollspy-nav","{closest:'li',smoothscroll:{offset:0}}");

Cheers,