Bug Menu OFF Canvas

Question

I made a menu that’s just off canvas when the screen is smaller than 768px, otherwise it appears by default on the page that works perfectly. The problem is that if I activate the menu and then der resize in the browser the menu will stop in the middle of the page, I do not know how to solve. The hosting link is this http://gioseffi.esy.es/Views/ I’m using the pseudo class :checked of css to enable and disable the menu, if you have any better solution, I am open to opinions, grateful ;)

Media for menu to stay off screen:

@media screen and (max-width: 768px) {
  .barra {
  left: -300px;
  position: fixed !important;
}

Answer 1

Your menu is breaking when resizes the screen because its <input type="checkbox" id="check"> is marked, thus the transform: translateX(300px); still activated, pushing the menu even further to the right when it should not...

So, in order for your component to work well in a solution using CSS3, you should apply some improvements to your style sheet... Starting with the line 116 of css style. extending the range of media query that removes the side menu of 500 for 768, because between this measure, your application is running out of menu, and transferring the Transform also into that media query, thus, the effect will push your menu ONLY when it is in the "mobile state"

@media only screen and (max-width: 768px) {
  .container {
    padding-left: 20px !important;
    padding-top: 30px;
  }
  #check:checked ~.barra{
    transform: translateX(300px);
  }
}