.slide-menu { position: fixed; min-width: 320px; width: 100%; max-width: 380px; min-height: 100vh; top: 0; right: 0; display: none; /*overflow: hidden;*/ overflow: auto; height: auto; box-sizing: border-box; background: #333; transition: -webkit-transform 300ms ease-in-out; transition: transform 300ms ease-in-out; transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out; -webkit-transform: translateX(100%); transform: translateX(100%); will-change: transform; z-index: 1501; } .slide-menu .slider { position: absolute; top: 0; left: 0; width: 100%; transition: -webkit-transform 300ms ease-in-out; transition: transform 300ms ease-in-out; transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out; -webkit-transform: translateX(0); transform: translateX(0); will-change: transform; } .slide-menu ul { padding-left: 0; list-style: none; position: relative; min-width: 320px; width: 100%; max-width: 380px; margin: 0; } .slide-menu ul ul { position: absolute; top: 0; left: 100%; display: none; margin-bottom: 55px; } .slide-menu ul a { display: block; padding: 12px 24px; color: #fff; text-decoration: none; } .slide-menu.no-transition, .slide-menu.no-transition * { transition: none !important; } #mobile-catalog { /* margin-top: 35px;*/ } .slide-darker { width: 100vw; height: 100vh; background: rgba(100,100,100,.8); position: fixed; top: 0px; left: 0px; z-index: 1500; display: none; } .slide-menu ul li { border-bottom: 1px solid #444; }