/*righttopbottom*/ @-webkit-keyframes topbar-x { 0% { top: 0px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 45% { top: 6px; -webkit-transform: rotate(145deg); transform: rotate(145deg); } 75% { -webkit-transform: rotate(130deg); transform: rotate(130deg); } 100% { -webkit-transform: rotate(135deg); transform: rotate(135deg); } } @keyframes topbar-x { 0% { top: 0px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 45% { top: 6px; -webkit-transform: rotate(145deg); transform: rotate(145deg); } 75% { -webkit-transform: rotate(130deg); transform: rotate(130deg); } 100% { -webkit-transform: rotate(135deg); transform: rotate(135deg); } } @-webkit-keyframes topbar-back { 0% { top: 6px; -webkit-transform: rotate(135deg); transform: rotate(135deg); } 45% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 75% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 100% { top: 0px; -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes topbar-back { 0% { top: 6px; -webkit-transform: rotate(135deg); transform: rotate(135deg); } 45% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 75% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 100% { top: 0px; -webkit-transform: rotate(0); transform: rotate(0); } } @-webkit-keyframes bottombar-x { 0% { bottom: 0px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 45% { bottom: 6px; -webkit-transform: rotate(-145deg); transform: rotate(-145deg); } 75% { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } 100% { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } } @keyframes bottombar-x { 0% { bottom: 0px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 45% { bottom: 6px; -webkit-transform: rotate(-145deg); transform: rotate(-145deg); } 75% { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } 100% { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } } @-webkit-keyframes bottombar-back { 0% { bottom: 6px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } 45% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 75% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { bottom: 0px; -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes bottombar-back { 0% { bottom: 6px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } 45% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 75% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { bottom: 0px; -webkit-transform: rotate(0); transform: rotate(0); } } .navbar-toggle { position: relative; float: right; padding: 10px 10px; margin-top: 18px; margin-right: 15px; margin-bottom: 18px; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px; } .navbar-default .navbar-toggle .icon-bar { display: block; position: relative; width: 24px; height: 3px; border-radius: 1px; background-color: #0a46a9; } /* .navbar-default .navbar-toggle .icon-bar{ background-color: #0c5125; }*/ .navbar-default .navbar-toggle { border-color: transparent; } .navbar-default .navbar-header button{ background:transparent; margin: 0; height: 60px; border-radius: 0; padding: 0 17px; width: 60px; } .navbar-default .collapsed{ } .navbar-default .navbar-collapse{ border-color: #fff; } .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background-color:transparent; } .navbar-default .navbar-toggle .icon-bar + .icon-bar { margin-top: 5px; } .navbar-default .navbar-toggle .bar1{ top: 8px; -webkit-animation: topbar-x 500ms 0s; animation: topbar-x 500ms 0s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .navbar-default .navbar-toggle .bar2{ opacity: 0; } .navbar-default .navbar-toggle .bar3{ bottom: 8px; -webkit-animation: bottombar-x 500ms 0s; animation: bottombar-x 500ms 0s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .navbar-default .collapsed .bar1{ top: 0; outline: 1px solid transparent; -webkit-animation: topbar-back 500ms 0s; animation: topbar-back 500ms 0s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .navbar-default .collapsed .bar2{ outline: 1px solid transparent; opacity: 1; } .navbar-default .collapsed .bar3{ bottom: 0; outline: 1px solid transparent; -webkit-animation: bottombar-back 500ms 0s; animation: bottombar-back 500ms 0s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @media (max-width: 767px){ .navbar-brand{ padding: 10px 15px; } .navbar-brand>img { height: 40px; } } /*righttopbottom*/