$nav-icon_bar-width: 22px; .navbar-header { @media (max-width: $grid-float-breakpoint) { float: none; } } .navbar-toggle { @media (max-width: $grid-float-breakpoint) { display: block; } @media (max-width: $screen-md) { margin-right: -10px; // equalize padding between right-side icons } @media (max-width: $screen-xs) { margin-left: 5px; } // begin Hamburger + animation .icon-bar { background-color: $color-gray-600; transition: all 0.2s; } .middle-bar { opacity: 1; } &.open { .icon-bar { width: $nav-icon_bar-width; } .top-bar { transform: rotate(45deg); transform-origin: 10% 10%; } .middle-bar { opacity: 0; } .bottom-bar { transform: rotate(-45deg); transform-origin: 10% 90%; } } } .navbar-nav > li { @media (max-width: $grid-float-breakpoint) { float: none; } &.navigation-user_info-logged_out-mobile { display: none; @media (max-width: $grid-float-breakpoint) { display: block; padding: 5px 20px; } } } .navigation-user_info-logged_out-mobile > a.btn { @media (max-width: $grid-float-breakpoint) { padding-top: 10px; // custom pad req. to override BS to fix btn align bug } } // mobile menu button styling .nav-mobile-menu-account { padding-top: 10px; padding-left: 25px; padding-right: 25px; width: 100%; background-color: $color-white; } .nav-mobile-menu { &.affix { position: relative; // we only want the affix behavior in the mobile views } @media (max-width: $grid-float-breakpoint) { position: absolute; right: 0; width: $minimum-application-width; border-left: solid 1px $color-gray-200; background-color: $color-white; transform: translateX(100%); transition: opacity 0.2s ease-in-out, transform 0.3s ease-in-out, width 0.2s ease-in-out; z-index: $zindex-tooltip; /* Sit on top */ &.affix { position: fixed; top: $nav-height; bottom: 0; overflow-y: scroll; overflow-y: overlay; // better for webkit browsers overflow-x: hidden; } &:not(.affix) { padding-bottom: 100%; } } @media (min-width: $screen-xs) and (max-width: $grid-float-breakpoint) { &.affix.in { direction: rtl; // puts scrollbar to lefthand side } } @media (max-width: $screen-xs) { width: 100%; } &.in { opacity: 1; transform: translateX(0%); } }