YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar robuustmedia asked

Onepage theme, how to add active on scroll?

Hello guys, keep up the great work!

Can you create a onepage tutorial to change templates to onepage websites? For this to work we need three things:
Step 1 - Add the smoothscroll script to the Script section of the template:
<script>
jQuery(function($) {
// Add the UIkit "smoothscroll" to the navbar and links with an anchored target:
$('ul.uk-navbar-nav').attr('data-uk-scrollspy-nav','{smoothscroll: {offset: 90}}');
$('.uk-navbar-nav a[href*="#"]').attr('data-uk-smooth-scroll','');
});
</script>

Step 2 - Add Menu links to external URLs, for instance Main links to: #tm-main

So far so good, but:

Step 3 - How can we make sure that on scroll the menu item in view will be changed to active class? This is done in the Uniq template for instance: Click here and scroll :-)
Thanks in advance!

  • Joomla
  • Tutorial
  • Luna

Edited

4 Answers

1

Avatar robuustmedia answered

Never mind, it seems to work like it should. Only in Luna there's no style attached to .uk-active by default. Will fix this myself.

0

Avatar robuustmedia answered

@machmoud.sabbagh

It works like it should, but in my template there was no correct active style in the css. You should add this, then it works.

Know someone who can answer? Share a link to this question via email or twitter.