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

Avatar yannicklepogam asked

SOLVED - How to add in Yootheme Pro floating navigation button floating on right of the page like in Helios demo

Hello

I am really sorry if this question has already been asked ...

I spent a lot of time on the forum without success. Either I did not understood what was said and I did not succeed to reproduce it myself, or it was not exactly what I was looking for perhaps because I don't know exactly how what I am looking for is called in good English!

(printscreen of dotnav helios demo removed form server)

How can I put that in YooPro?

I have already an ID per section in my home page.

Thank you in advance
Yannick

  • UIkit
  • YOOtheme Pro

Edited

7 Answers

1

Avatar michael.anlauf Support answered

Just in a text element or by creating a module. How ever, i would avoid nav for the mobile phone since you swipe anyway with your fingers and the space is very limited.
This is a link to my site.

0

Avatar michael.anlauf Support answered

You're welcome!
But i wonder if any visitor will actually use this kind of navigation ever. It's more a gimmick i think.

0

Avatar yannicklepogam answered

Thank you, Danke, Merci Michael. Straight to the point! I have add a html module somewhere into the page into a section from page builder, and it works like a charm.

Remark : if there is no free space then I would have had to add an extra section into the page just for that html module for dotnav code, and this can disturb the nice design of the page (having an extra space or padding between sections ...).

If you have any better suggestion to place the html code into the page I would be glad to hear it. Otherwise I close the case, txs!
Rgs, Yannick

0

Avatar yannicklepogam answered

you said "i wonder if any visitor will actually use this kind of navigation ever. It's more a gimmick i think."

100% agree .. but my customer want it .. that's the charm to leave in Tahiti polynesia ... we are litterally in 1990's here from web tech' point of view (and bandwith by the way). I face now the web trends and mood I was 20 years ago when I was leaving in Switzerland ... lol

0

Avatar yannicklepogam answered

Michael, what do you mean by "You should link to the site"?

I put in page builder into html element into a section the following code :
<div class="uk-position-center-right uk-position-medium uk-position-fixed hidden-phone">
<ul class="uk-dotnav uk-dotnav-vertical" uk-scrollspy-nav="closest: li; scroll: true">
<li class="uk-active"><a href="#hometop">hometop</a></li>
<li><a href="#pourquoi">pourquoi</a></li>
<li><a href="#domaines">domaines</a></li>
<li><a href="#tahitien">tahitien</a></li>
<li><a href="#solutions">solutions</a></li>
<li><a href="#raisons">raisons</a></li>
<li><a href="#positif">positif</a></li>
<li><a href="#mediateurs">mediateurs</a></li>
<li><a href="#motdupresident">motdupresident</a></li>
</ul>
</div>
<div class="uk-position-bottom-right uk-position-medium uk-position-fixed visible-phone" style="margin-right: 2px!important;">
<ul class="uk-dotnav uk-dotnav-vertical" uk-scrollspy-nav="closest: li; scroll: true">
<li class="uk-active"><a href="#hometop">hometop</a></li>
<li><a href="#domaines">domaines</a></li>
<li><a href="#solutions">solutions</a></li>
<li><a href="#positif">positif</a></li>
<li><a href="#motdupresident">motdupresident</a></li>
</ul>
</div>

Where else can I put that code? (sorry for this basic question)

by the way on iphone the dotnav is not enough on the right and hide partially the text. my style="margin-right: 2px!important;" doesn't work apparently ..

Edited

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