« Back

Easy Sticky-nav using alloy.

Technical Blogs June 21, 2013 By Ryan Schuhler Staff

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!

Threaded Replies Author Date
Ryan thanks for the example. Just one question.... gordon daniels July 13, 2013 11:30 AM
this would go in your main.js file, but if you... Ryan Schuhler August 5, 2013 10:38 AM
Thank you. Really appreciate the help. gordon daniels August 7, 2013 6:06 AM
Hi Ryan, I really would like to use this... Andre Baukholt September 11, 2013 7:17 AM
Hi Andre, If you include the js code in your... Jesús Salinas January 13, 2014 4:20 AM
Thanks Jesus for the the response. Sorry Andre,... Ryan Schuhler January 13, 2014 9:03 AM

Ryan thanks for the example. Just one question. What file would you put the code in? Custom.css?

thanks
Posted on 7/13/13 11:30 AM.
this would go in your main.js file, but if you wanted to change the styling at all that would go into your custom.css
Posted on 8/5/13 10:38 AM in reply to gordon daniels.
Thank you. Really appreciate the help.
Posted on 8/7/13 6:06 AM.
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
Posted on 9/11/13 7:17 AM.
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.
Posted on 1/13/14 4:20 AM in reply to Andre Baukholt.
Thanks Jesus for the the response. Sorry Andre, I missed your comment a while back.
Posted on 1/13/14 9:03 AM in reply to Jesús Salinas.