Menu fixed to top

[panganino]

Hello,
How to make jPanelMenu fixed to top of page ?

[ray73864]

I too would be interested in knowing how to do this.

[adnnco]

I have the same bug. Did you fix the error ?

[jhowley89]

Because jPanel wraps the page content and then applies a css transform fixed elements will not work. There are numerous solutions, each with pros and cons.

1. You exclude the content from the panel e.g.

JS

$.jPanelMenu({
    excludedPanelContent: '.fixed-menu',
    ...
});

This will allow the elements to be fixed to the viewport however they will not have the animation applied to them and you may need to use z-indexes to get them in the right display order relative to the menu.

2. You only apply the css transform to the panel when required

JS

$.jPanelMenu({
    beforeOpen: function() {
        $('.jPanelMenu-panel').addClass('jPanelMenu-important');
    },
    beforeClose: function() {
        $('.jPanelMenu-panel').removeClass('jPanelMenu-important');
    }
    ...
});

CSS

.jPanelMenu-panel{
    position: inherit !important;
    transform: none !important;
}

.jPanelMenu-important{
    position: static !important;
    transform: translate3d(-250px, 0px, 0px) !important;
}

This means that you get the fixed position elements until you open the menu but you don't have to mess with z-indexes.

3. remove the animations completely
CSS

.jPanelMenu-panel{
    position: inherit !important;
    transform: none !important;
}

The panel will not animate any more ( no sliding to the side ) and you will need to ensure that the menu has a sufficient z-index to be above your content.

This also applies to #114