@media screen and (max-width: 767px) { * { margin: 0; padding: 0; } /* It is needed */ html, body {overflow-x: hidden;} .menu-anchor { position: absolute; top: 20px; left: 0; width: 35px; height: 30px; display: inline-block; vertical-align: middle; position: relative; text-indent: -9999px; overflow: hidden; cursor: pointer; background: #ccc; border-radius: 2px; z-index: 999; } .menu-anchor:before { content: ""; display: block; margin: 7px auto; border-radius: 2px; width: 70%; height: 0.25em; background: #fff; box-shadow: 0 .5em 0 0 #fff, 0 1em 0 0 #fff; } .menu-active .menu-anchor {background: #00a5f2 } .menuMobile menu { position: fixed; top: 0; left: 0; z-index: 1; width: 220px; height: 100%; padding-top: 10px; background: #7e7d81; box-shadow: inset -5px -10px 10px 0 rgba(0,0,0,.3) } .menuMobile menu li a { display: block; border-bottom: 1px solid rgba(0,0,0,.1); margin: 0 10px; padding: 10px; color: #FFF; text-decoration: none; border-radius: 2px; } .menuMobile menu li a:hover { background: #FFF; color: #666; } /* Put menu outside of the screen Theses values are exactly the sidebar width */ .menuMobile menu { -webkit-transform: translateX(-220px); -moz-transform: translateX(-220px); -ms-transform: translateX(-220px); transform: translateX(-220px); -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; } /* Original position of HEADER and MAIN */ header, main, footer { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; } /* With class menu-active */ .menu-active menu { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .menu-active header, .menu-active main, .menu-active footer { -webkit-transform: translateX(220px); -moz-transform: translateX(220px); -ms-transform: translateX(220px); transform: translateX(220px); } }