1. 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

Provide a sticky floating menu to your users when they scroll the forums

  1. vexx
    Compatible XF 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:

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

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

    <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 :)


    1. screen.png
    Triops and smimosmile like this.