LeftMenu

[milespop]

Hi guys,

I'm trying to change the topbar so that it doesn't take as much real estate and disappears when the user scrolls below the menu (We've got this right by changing the position to absolute).
The problem now is that on mobile the menu (which is across the top) is now still appearing in the same position but still has the margin above it where the top menu would have been.

Is there a way to get rid of this so that the menu sits atop the screen but only takes up the necessary size instead of where the topbar's size too?

http://imgur.com/0MGnO8P --> Section highlighted in red

[mert.sincan]

I think you want to do fixed Sentinel left menu. Right? Forum issue; http://forum.primefaces.org/viewtopic.php?f=23&t=44730

[milespop]

Hi Aragorn, thanks for your reply. My issue is not that it scrolls off the screen (this is what we want) but rather that it is taking too much space at the top of the screen on a mobile as we have made the topbar absolute rather than fixed on top so when the topbar scrolls off the screen the menu is still taking 'two' spaces rather than 'one'

[mert.sincan]

Hi Milespop,

You need to add some css and js codes for this feature. Please try this code;
JS

Code: Select all

$(window).scroll(function() {
    var menubar = $('#layout-menubar');
    if($(this).width() <= 640) {
        if($(this).scrollTop() < 55) {
            if(menubar.css('position') != "absolute")
                menubar.css({'position': 'absolute', 'padding-top': '55px'});
        }
        else {
            if(menubar.css('position') != "fixed")
                menubar.css({'position': 'fixed', 'padding-top': '0px'});
        }
    }
});

CSS

Code: Select all

#layout-header{
    position: absolute !important;
}

@media(max-width:640px) {
    #layout-menubar {
        position: absolute;
    }
}
@media(min-width:641px) {
    #layout-menubar {
        position: relative !important;
        padding-top: 55px !important;
    }
}

Screenshots;

[milespop]

Hi

Sorry which files to I place them in? I put in the senitnel layout css and js and it didn't seem to work.

Edit: Apologies, working great. Thank you.

[mert.sincan]

Glad to hear, thanks for the update!