@media (max-width: 980px) { body { height: 100%; } .header { height: 58px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26); position: fixed; top: 0px; z-index: 5; #main-page-title { bottom: -31px; font-size: 20px; color: #FFF; left: 52px; font-weight: 400; } #user_label { right: 0px; bottom: 7px; } #main-menu { display: none; } } #menu { background-color: #1D1F20; background-image: linear-gradient(145deg, #1D1F20, #404348); a { color: #fff; text-decoration: none; } a:hover { text-decoration: underline; } } .menu-header-title { font-weight: 400; letter-spacing: 0.5px; margin: 0; } .menu-section { margin: 25px 0; } .menu-section-title { text-transform: uppercase; color: #85888d; font-weight: 200; font-size: 13px; letter-spacing: 1px; padding: 0 20px; margin:0; } .menu-section-list { padding:0; margin: 10px 0; list-style:none; a { display: block; padding: 10px 20px; } a:hover { background-color: rgba(255, 255, 255, 0.1); text-decoration: none; } } #panel { background: white; min-height: 100%; padding-top: 80px; } .slideout-menu { position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 0; width: 256px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: none; } .slideout-panel { position: relative; z-index: 1; } .slideout-open, .slideout-open body, .slideout-open .slideout-panel { overflow: hidden; overflow-y: hidden !important; } .slideout-open .slideout-menu { display: block; } html { height: 100%; overflow-y: hidden; } .slideout-open { overflow-y: hidden; height: 100%; } body { overflow-y: scroll; overflow-x: hidden; } }