Adding a fixed nav breaks the left menu in IE 11

[christophery]

Adding a fixed nav breaks the left menu in IE 11

[nelsonic]

We are encountering this issue. @donnyv did you manage to fix it? (thanks)

[donnyv]

Yeah but its not pretty. I did a quick hack just to get it to work.
I modified pushy file and added a work around only for IE.

I pulled IE detection code from this plugin. http://www.pinlady.net/PluginDetect/IE/
Thats what that "browser.isIE" comes from.

function togglePushy() {
    body.toggleClass(pushyActiveClass); //toggle site overlay
    pushy.toggleClass(pushyClass);
    container.toggleClass(containerClass);
    push.toggleClass(pushClass); //css class to add pushy capability

    // hack so nav bar doesn't cover scrollbar
    if (pushy.hasClass("pushy-left"))
        $("html, body").css("overflow-x", "visible");
    else
        $("html, body").css("overflow-x", "hidden");


    // hack around IE because of fixed position
    if (browser.isIE) {
        if (pushy.hasClass("pushy-left"))
            $(".navigation-bar").css("position", "fixed");
        else
            $(".navigation-bar").css("position", "relative");
    }

    }

[nelsonic]

Thanks for reply.

Uncaught ReferenceError: browser is not defined 

Where are you defining browser?
(how are you doing the browser sniffing?)

[donnyv]

I updated my response above.

[nelsonic]

Ok. thanks @donnyv .
this patches the issue but not a fix. 😕
we are having other issues with IE.
Is your finished site/app public so we can see how you are using pushy? (thanks)

[donnyv]

Still in development mode. I'm only supporting IE 10 and up, so that gets rid of a lot of problems for us.

[christophery]

The trick is to have any fixed position (like a fixed header) elements outside of the container div. See the demo.html for examples.