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.

Edited 1 year, 4 months ago by Sami Rods


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...

Edited 1 year, 4 months ago by Sami Rods


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,

Write a reply

Login or register to write a reply, it's free!