.wrapper { display: flex; min-height: 100%; } .sidebar { background-color: #FFFFFF; z-index: 99999999999999; direction: rtl; text-align: right; padding: 20px; -moz-box-shadow: 1px 3px 9px -1px #777,inset 2px 0 41px -8px rgba(0, 0, 0, 0.45); -webkit-box-shadow: 1px 3px 9px -1px #777,inset 2px 0 41px -8px rgba(0, 0, 0, 0.45); box-shadow: 1px 3px 9px -1px #777,inset 2px 0 41px -8px rgba(0, 0, 0, 0.45); position: fixed; width: 270px; height: 100%; overflow-y: auto; left: 0; -moz-transform: translate3d(-270px,0,0); -ms-transform: translate3d(-270px,0,0); -o-transform: translate3d(-270px,0,0); -webkit-transform: translate3d(-270px,0,0); transform: translate3d(-270px,0,0); -moz-transition: .4s all ease-out; -o-transition: .4s all ease-out; -webkit-transition: .4s all ease-out; transition: .4s all ease-out; top: 0; } .content { flex: 1; padding: 30px; background: #eee; box-shadow: 0 0 5px rgba(0,0,0,1); transform: translate3d(0,0,0); transition: transform .3s; } .sidebar.isOpen { -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -moz-transition: .7s all cubic-bezier(0.29, 0.59, 0.43, 1.16); -o-transition: .7s all cubic-bezier(0.29, 0.59, 0.43, 1.16); -webkit-transition: cubic-bezier(0.29, 0.59, 0.43, 1.16); transition: .7s all cubic-bezier(0.29, 0.59, 0.43, 1.16); } #btnSidebar { cursor: pointer; } #btnSidebar:before { content: '\f0c9'; font: 15px fontawesome; position: relative; top: 1px; } #btnSidebar.close:before { content: '\f00d' !important; } .sidebar .title { direction: rtl; font-size: 21px; font-family: Primary; color: #484848; text-align: center; } .sidebar ul.nav li { width: 45%; display: inline-block; border: 1px solid #4e4e4e; background-color: #404040; -moz-box-shadow: 0 0 1px 0 #fbfbfb; -webkit-box-shadow: 0 0 1px 0 #fbfbfb; box-shadow: 0 0 1px 0 #fbfbfb; border-radius: 100px; padding: 5px; padding-bottom: 0; text-align: center; margin: 5px 2%; float: right; height: 90px; -moz-transition: .4s all ease; -o-transition: .4s all ease; -webkit-transition: .4s all ease; transition: .4s all ease; } .sidebar ul.nav li:hover { background-color: #FF6297; border-color: #FF357A; -moz-box-shadow: 0 0 31px -5px rgb(255, 0, 86); -webkit-box-shadow: 0 0 31px -5px rgb(255, 0, 86); box-shadow: 0 0 31px -5px rgb(255, 0, 86); -moz-transition: .4s all cubic-bezier(0.15, 0.68, 1, 1); -o-transition: .4s all cubic-bezier(0.15, 0.68, 1, 1); -webkit-transition: .4s all cubic-bezier(0.15, 0.68, 1, 1); transition: .4s all cubic-bezier(0.15, 0.68, 1, 1); } .sidebar ul.nav li a { display: block; height: 100%; text-align: center; line-height: 1; cursor: pointer; } .sidebar ul.nav li a img { display: inline-block; width: 32px; height: 32px; margin: 0 auto; margin-bottom: 2px; -moz-transition: .7s all linear; -o-transition: .7s all linear; -webkit-transition: .7s all linear; transition: .7s all linear; } /*.sidebar ul.nav li:hover a img { opacity: .9; -moz-transition: .7s all cubic-bezier(0.65, 0, 0.83, 1.09); -o-transition: .7s all cubic-bezier(0.65, 0, 0.83, 1.09); -webkit-transition: cubic-bezier(0.65, 0, 0.83, 1.09); transition: .7s all cubic-bezier(0.65, 0, 0.83, 1.09); }*/ .sidebar ul.nav li a span { display: flex; width: 100%; font-size: 13px; direction: rtl; color: #fff; line-height: 12px; min-height: 22px; align-items: flex-start; text-align: center; justify-content: center; } .sb_img { display: inline-block; width: 100%; text-align: center !important; margin-top: 7px; }