0

I got this header that is fixed and always going to stay on top during scrolling. and it works fine. but when i switch to responsive view and click my menu button and switch back to desktop view again, none of the position: fixed work... here's my website: Website

Arian Rahimi
  • 57
  • 5
  • Welcome to Stack Overflow! Please edit your question to include the relevant code to show your problem. Please see [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) for tips on getting the best help. – Mike Cluck Dec 01 '15 at 23:34

1 Answers1

0

When you click the menu in responsive view it adds the inline style="transform: translate3d(300px,0px,0px)" to the <div id=mp-pusher> and when you close it it leaves the transform style there.

Transform styles break fixed positioning per this answer.

When I changed the inline style to transform: none; in Chrome Dev Tools the fix-menu class worked again.

You need to remove the transform or set it to none when the mp-pusher closes.

Community
  • 1
  • 1
ourmandave
  • 1,505
  • 2
  • 15
  • 49
  • you're right! just one more question... Why does this one works just fine? [link](http://www.ayandehcenter.com) – Arian Rahimi Dec 05 '15 at 11:06
  • It works in IE11 but not Chrome 45. I did some digging and it looks like transform gives Chrome all sorts of issues with fixed position. A couple ideas. 1. Change line 205 in [mlpushmenu.js](https://github.com/codrops/MultiLevelPushMenu/blob/master/js/mlpushmenu.js#L188) from `this._setTransform('translate3d(0,0,0)');` to `this._setTransform('none');` or 2. [Use jquery to detect media query change from a class change](https://www.fourfront.us/blog/jquery-window-width-and-media-queries) and remove it with `$('#mp-pusher').removeAttr('style');`. Not tested, but they might break the menu close. – ourmandave Dec 05 '15 at 15:04