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

Avatar michael.anlauf Support Online asked

Concept of a single page navigation (New version 4. Nov. 2017)

Sticky single page navigation using a subnav with scrollspy.
Example page.
Code used in a navbar position custom module:

<div class="uk-card uk-card-body uk-card-small" style="z-index: 980;">    
<ul uk-scrollspy-nav="closest: li; scroll: true; offset: 20" class="uk-subnav uk-margin-remove-bottom uk-flex-center" uk-margin="">    
<li class="el-item uk-first-column">    
<a class="el-link" href="#beauty" uk-scroll="offset: 78;">Beauty</a></li>    
<li class="el-item"><a class="el-link" href="#lecter" uk-scroll="">Lecter</a></li>    
<li class="el-item"><a class="el-link" href="#look" uk-scroll="">Look</a></li>    
<li class="el-item">    
<a class="el-link" href="#map" uk-scroll="">Map</a></li>    
<li class="el-item">    
<a class="el-link" href="" uk-totop ratio="1.0" uk-scroll="offset: 20"></a></li>   
</ul></div>

For the mobile version create a copy of the module, add sticky-menu as class and publish as first element in the top section as J!Module and the visibility class uk-hidden@m.
Then add

.sticky-menu {  
    position: fixed;  
    top: 10px !important;  
    right: 0;  
    left: 0;  
    margin-right: auto;  
    margin-left: auto;  
    z-index: 999;  
}

to custom code / css.
In case you don't need the navbar you can of course use the mobile solution for both without the visibility rule.

Only tested in Joomla but should also work in Wordpress!

Regards, Michael tucfoto
Slideshow design
Playground

  • Joomla
  • Tutorial
  • YOOtheme Pro

Edited

4 Answers

0

Avatar hannes.martin answered

Hello michael,

this is a perfect guide - it works great - thank you very much!
Might it be possible - with the functions of uikit - to implement a scroll and swipe function like this one https://github.com/peachananr/onepage-scroll ?

I would be very happy about a - hopefully positive - answer!

best regards
hannes

0

Avatar michael.anlauf Support Online answered

Thank's, how ever I never used the solution you linked to but you are free to try it out.
Even I don't like Websites using this solution which actually prevent users from scrolling to a specific part of an website.
I think it's not a nice user experience when a website starts to do things you don't want and can't influence.
Same sometimes with language detection. My computer is set to german but I like to read in english and sometimes it's difficult to switch and drives me crazy.

0

Avatar hannes.martin answered

Basically, I totally agree with you!
Only in my case it would make sense - there is almost no text and the presentation of the content (almost only image content) needs the entire viewport.

Now I just had the hope that there is already a special function in the uikit that I have not discovered yet.

But thanks for the quick response!

best regards
hannes

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