Bug Menu OFF Canvas

Question

Bug Menu OFF Canvas

Navigation

#1 by (1 votes)

1

I made a menu that is only off canvas when the screen is less than 768px , otherwise it appears by default on the page This works perfectly. The problem is that if I activate the menu and then resize in the browser the menu will stop in the middle of the page, I do not know how to solve. The link of the hosting is this link I am using the pseudo class :checked of css to be able to activate and deactivate the menu, if they have any better solution, I am open to opinions, grateful;)

Media to leave menu off screen:

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

html css css3 twitter-bootstrap

asked by anonymous 30.03.2017 / 03:45

1 answer

MVP - What is where? WebView does not show the page

score 1 · Accepted Answer

Your menu is breaking when you resize the screen, because your <input type="checkbox" id="check"> is checked, so transform: translateX(300px); is still enabled, pushing the menu even further to the right when it should not ...

So, for your component to work well in a solution using CSS3, you should apply some improvements in your style sheet ... Starting with 116 line of style.css expanding the reach of the media query that removes the 500 side menu to 768 , because between this measure, your application is running out of menu, and transferring the transform into that media query as well, 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);
  }
}