Pikabu - Miscalculating Height

I'm trying to create an off canvas mobile menu for a website I'm working on which will replace an old buggy version. I've settled on https://github.com/mobify/pikabu as it does eve

Solution 1:

this appears to be a 'feature' of pikabu.. (if you step through the Pikabu.prototype.setHeights function you can see the value being returned for windowHeight is incorrect)

line 514: var windowHeight = this.device.isNewChrome ? window.outerHeight : $(window).height();

window.outerHeight on chrome includes the height of the browser toolbar, address bar etc (~95px)

you will probably need to either remove this line so that it just supplies window.outerHeight or do some better device sniffing so that this only triggers on mobile

Solution 2:

I was fiddling around with Firebug.
In the css when you turn off header { position: fixed; } it seems to pop into the right place (main.css).

I would not use position: fixed/absolute at all in CSS. If you remove those, including the top: 0, right: 0 and height: 50px tags, you clean up your code. It seems to work properly too.