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

Avatar michael.anlauf Support 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

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

0

Avatar john.sollecito answered

Hi Michael,

This is an interesting concept, but I do have a question. How can I use this on my homepage? I can't seem to replace the main menu with the code you provided --- How did you hide the main joomla menu in the example you provided?

Regards,

John

0

Avatar john.sollecito answered

Hmm, that didn't work Michael. I hid the main menu from my home page and even hid it from the Yootheme template and it still showed up on my home page. What's even more weird, I unpublished the main menu module and it still showed up.

I tried hiding other modules from the home page and it worked just fine. Is the main menu protected from hiding and unpublishing?

0

Avatar alan.ingram answered

Hello Michael,

This works perfectly for me until the mobile part.

Please can you take a look at http://www.ecapex.co.uk/ and advise what I am doing incorrectly?

Thanks,
Alan

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