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

Avatar riska.veldhoven.11 asked

uk-sticky not working


I am trying to create a submenu bar using uk-sticky: https://getuikit.com/docs/sticky

But as soon as I save the module, the uk-sticky is stripped from the code. I use JCE Editor and I tried using tiny MCE, but same issue.

It's for this test-page: http://test.santosbikes.net/assortiment/lite-serie/travel-lite

What can I do to fix this?


Update 1
I switched to Codemirror, the code isn't stripped, but sticky is not working unfortunately.
This is the only UIKit code that is stripped by JCE by the way, didn't have this before with UIKit.

Update 2
Sorry for my late reply. But, I have changed the code to:
<div align="right" data-uk-sticky="{boundary: true}"><a href="#getest">Goed getest</a>&nbsp;&nbsp;<a href="#kenmerken">Kenmerken</a></div>

But, still not sticky... I would love to see this work, hope there is a solution.
Thanks for helping!

Update 3
I added it because I want the sticky div only to be visible within the content area. But, apart from that, I also tried it without the boundery of course, but no luck either.

Update 4
Kayhan, I did read the documentation (a couple of times already), but it's just not making sense to me. How do I figure out the id of this content area? I could try that.

Update 5
Changed the code to:
<div align="right" data-uk-sticky="{boundary: 'tm-main'}"><a href="#getest">Goed getest</a>&nbsp;&nbsp;<a href="#kenmerken">Kenmerken</a></div>

But still not working.

  • Joomla
  • General Question
  • UIkit


8 Answers


Avatar kayhan Support Online answered

The code is stripped by JCE unfortunately. So for this kind of code, please switch to editor Codemirror. That editor does not strip any html.


Avatar kayhan Support Online answered

Please read the documentation https://getuikit.com/v2/docs/sticky.html

<!-- Bind sticky to its parent element -->  
<div data-uk-sticky="{boundary: true}">...</div>  

<!-- Bind sticky to any element -->  
<div data-uk-sticky="{boundary: '#my-id'}">...</div>

The parent element is probably not enough in your case, so you will have to specify the id of your content area.


Avatar kayhan Support Online answered

How do I figure out the id of this content area?

You have to check the html source of that site and then locate the IDs that are near your sticky code (looks for id="...". And test the different IDs with the sticky example in my previous response.


Avatar kayhan Support Online answered

Yes, it doesn't work, because you didn't specify an id in your code. Please read the documentation more carefully (every character is important).

So try #tm-main instead of tm-main ...


Avatar philipp Yootheme answered

did the answer of @kayhan help you to find a solution for your problem? Please accept his answer by hitting the ✔ on the left.

Kind Regards

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