Easy Sticky-nav using alloy.

Ryan Schuhler
Ryan Schuhler
Less Than a Minute Read

Want a quick and easy way to make a sticky nav right out of the box with liferay? Thanks to AUI with 10 lines of code you can turn your navigation bar into a sticky nav. This is especially useful with long scrolling pages, where it is useful to see the navigation as you scroll.

You can see this in action on Liferay's Solution Forum sites.

Some additional styling may be needed to make it look the way you would like, but this essentially clones you navigation and then when you scroll pass the #navigation element it fixes the clone to the top of the page as you scroll. Pretty cool and easy to add. Enjoy!

Page Comments
Andre Baukholt
12 Years Ago
Hi Ryan, I really would like to use this feature, but sadly it's not working in my app (Liferay 6.1).
The result I got is that a the page bottom the navigation elements are rendered a second time (without style).
The actual top navigation element in my page is <nav id="navigation" ....> (liferay standard i think), I copied the script above to the main.js of my theme.

Any suggestions?

Thank in advance
Please sign in to reply.
thumbnail
Jesús Salinas Andre Baukholt
11 Years Ago
Hi Andre,

If you include the js code in your main.js file, you cloned navigation bar will be:
<nav class="sort-pages modify-pages lfr-hudcrumbs" style="left: 658px; top: 0px; width: 400px;">
<ul>
<li class="selected"> ... </li>
<li> ... </li>
<li> ... </li>
<li>… <li>
</ul>
</nav>

So you just have to apply css styles related to lfr-hudcrumbs class selector.
Please sign in to reply.

Related Assets...

No Results Found

More Blog Entries...