• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Unmaintained How to create a a sticky navigation menu 2014-03-18

No permission to download
Compatible XF 1.x versions
1.1, 1.2, 1.3
I've searched the forums for a solution in the past couple of days and I haven't found any resource or elegant solution to this simple style tweak.

First of all, you need to add a css class in your extra.css file:

Code:
.floaty {
position: fixed;
min-width:100% !important;
z-index:9999;
}
Then you have to create a template, let's name it "floating_bar" and add the following code do it:

Code:
<script>
   jQuery(document).ready(function ($){
       $(window).bind('scroll', function() {
       var navHeight = ( $(window).scrollTop() );
             if (navHeight > 100) {
                 $('#navigation').addClass('floaty');
             }
             else {
                 $('#navigation').removeClass('floaty');
             }
        });
    });
</script>
Then you have to go to your navigation template and add the following line:

Code:
<xen:include template="floating_bar" />
That's it! If you have a custom theme, you have to see the class of the menu there and replace #navigation with #custom or .class (depending on the case).

If you want to see an example, go to my eso forum, login with user: test pass: test and do some scrolling :)
Author
vexx
Downloads
76
First release
Last update
Rating
0.00 star(s) 0 ratings