One other minor issue. The first link in my nav is to a section below the Hero slideshow. When you scroll to the top of the page, the first menu item should be no longer active. With scrollspy however, it seems that the active link does not become inactive when the detected section scrolls out of view, it becomes inactive when a new section is detected. That meant that the first link, properly, did not become highlighted until you scroll down past the slideshow and the About section comes into view. However, scrolling back up to the top did not un-highlight the about link even though that section is no longer visible. The solution for this was simple and satisfactory enough. I added a link to the page top to the menu and gave it a style of {display:none;} Now, a new section is detected when you scroll to the top, and the about link looses it's active class. I thought I would have to use visiblity:hidden but scrollspy seems to work fine even with display:none.
Hey Jonathan,
It seems like you are adding to actions to your nav items, scrollspy to the li and smooth scroll to your a tag. I think this might well create wonkiness.
Regarding UIkit component, beans_uikit_enqueue_components( array( 'sticky' ), 'add-ons' ); needs to be in machine_enqueue_uikit_assets(), it is outside in the code you share.
Regarding your scroll to top, your href in machine_footer_right_text() need to be set to the same as the anchor id, for instance #mk-top.
Hope that helps,
Thank you once again Thierry. For the back to top, I just removed the #mk-top anchor completly since I was not using it (it was left in there from my first pass where I was using it. After reading more in the UIKit documentation, I saw that you don't need an anchor tag at all if you want to scroll to the very top of the page. just targeting # by itself works, and no extra markup.)
I moved the sticky component to where it belongs. I don't see a difference in function but it is definitely cleaner code. I tried to clean up the scrollspy nav again after doing that, thinking maybe the incorrect placement of the enque sticky add-on was also affecting scrollspy somehow, but that did not seem to make a difference.
For the nav, well, no. I am adding the both the scrollspy and the the smoothscroll to the a tag. Note the last example has: closest: 'li a' The earlier examples have closest: 'li'. smoothscroll did not work applied to the li, and with scrollspy applied to the li, the a did not work at all, so since I had to apply both components, I had to apply them to the a tag. This alone is what I expected to work:
beans_add_attribute( 'beans_menu[_navbar][_primary]', 'data-uk-scrollspy-nav', "cls: 'uk-active', closest: 'li', smoothscroll:{offset:70}}" );This is what does work:
beans_add_attribute( 'beans_menu[_navbar][_primary]', 'data-uk-scrollspy-nav', "cls: 'uk-active', closest: 'li a'}" );
beans_add_attribute( 'beans_menu_item_link', 'data-uk-smooth-scroll', '{offset: 70}' );Hey Joanathan,
What I meant is that you don't need to have two lines for that and can combined your scrollpsy and smooth-scroll to avoid confict. You code would be as follow:
beans_add_attribute( 'beans_menu[_navbar][_primary]', 'data-uk-scrollspy-nav', "{cls: 'uk-active', closest: 'li a', smoothscroll: {offset: 70}}" );PS: note that you also forgot a curly bracket in your scrollspy parameters
Yes, putting it all into one line is what I kept trying and could not get to work. I even copied and pasted from examples and still could not get it working, but I guess I never copied the entire line, just the part within the brackets - so of course the missing bracket was the problem. Thanks for that note, it's your PS afterthought that solved the problem. Stupid of me.
Hey Jonathan, glad to hear you back on track, have fun!