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

Avatar michael.anlauf Support asked

Concept of a single page navigation

Sticky single page navigation using a subnav with scrollspy.
Example page.
Code used in a top position builder module with html element:

<div class="uk-card uk-card-body uk-card-small" style="z-index: 980;" uk-sticky="offset: 20">  
<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="">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.5" uk-scroll="offset: 20;"></a></li>  
</ul></div>

CSS used for the element row:

.el-element {margin-top: -60px;}

Only tested in Joomla but should also work in Wordpress!

Regards, Michael tucfoto
Slideshow design
Playground

  • Joomla
  • Tutorial
  • YOOtheme Pro

Edited

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