.sidr { background:#333; color: #9a9da2; display: block; position: fixed; top: 0; height: 100%; z-index: 999999; width: 320px; overflow-x: hidden; overflow-y: auto; } .sidr .sidr-inner { padding: 0 0 15px; } .sidr.right { left: auto; right: -320px; } .sidr.left { left: -320px; right: auto; } .sidr { padding-left: 15px; padding-right: 15px; } .sidr .widget-title { color: #fff; } #widgets-nav { display: block; float: left; width: 100%; } .site-header-first #widgets-nav { background: #1892ed; } .hamburger { position: relative; cursor: pointer; transition-timing-function: linear; transition-duration: .15s; transition-property: opacity, filter; } .hamburger-box { display: inline-block; width: 20px; } .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { position: absolute; width: 22px; height: 2px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform; border-radius: 4px; background-color: #434343; } .site-header-first .hamburger-inner, .site-header-first .hamburger-inner:after, .site-header-first .hamburger-inner:before { background-color: #fff; } .hamburger-inner { display: block; margin-top: 2px; top: 12px; } .hamburger-inner:after, .hamburger-inner:before { display: block; content: ''; } .hamburger-inner:before { top: -5px; } .hamburger-inner:after { bottom: -5px; } .sidr-open .hamburger-inner:before { transform: translate3d(-8px, 0, 0) rotate(-45deg) scaleX(.7); } .sidr-open .hamburger-inner:after { transform: translate3d(-8px, 0, 0) rotate(45deg) scaleX(.7); } @media only screen and (min-width: 992px) { body.sidr-open:before { content: ""; left: 0; top: 0; z-index: 102; width: 100%; height: 100%; position: fixed; cursor: pointer; -webkit-transition: visibility 0s, opacity 0.4s linear; transition: visibility 0s, opacity 0.4s linear; visibility: visible; opacity: 1; background-color: rgba(51, 51, 51, 0.94); } }