CSS Issue with sidebar positioning on mobile device

Question

I've got a problem with sidebar menu. On some android devices like Samsung Galaxy Note 2 and in chrome browser position: fixed and actual position of menu fails and the menu is showed on my website. here's a CSS code. I've searched for the solution and only answers I got that I need to use

backface-visibility: hidden; and -webkit-transform:translateZ(0);

I did it, but the problem still remains. I'm a beginner in making mobile compatibility websites and can't figure out what is causing the problem. hope for your help.

nav {
  background-color:White; 
  padding-right: .25em;
  position: fixed;
  left: -25em;
  top: 0;
  padding-top: 3em;
  box-sizing: border-box;
  z-index: 300;
  height: 100%;
  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-backface-visibility: hidden;
  -webkit-transform:translateZ(0);
  backface-visibility: hidden;
}

nav.active 
{
left: 0;
overflow:auto;
}

    <script type="text/javascript">
//jquery for switching the class
 $('#mobile-sidebar').click(function (event) {
      $('nav').toggleClass('active');
 });
</script>

PS Sry for my bad english.

Answer 1

You can used @media rule, is used to define different style rules for different media types/devices.

@media screen and (min-width: 480px) {
    nav {
  background-color:White; 
  padding-right: .25em;
  position: fixed;
  left: -25em;
  top: 0;
  padding-top: 3em;
  box-sizing: border-box;
  z-index: 300;
  height: 100%;
  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-backface-visibility: hidden;
  -webkit-transform:translateZ(0);
  backface-visibility: hidden;
}

nav.active 
{
left: 0;
overflow:auto;
}

}

Check min-width for Samsung Galaxy Note 2. try to used @media rules for mobile compatibility and change css as per devices(width).