#rs-mobile-nav { .container { padding: 0; } padding: 4px 0 unquote('calc(env(safe-area-inset-bottom) + 4px)') 0; .navbar-icon-row { flex-direction: row; justify-content: space-around; width: 100%; .nav-link { padding: 0; .fa { padding-top: 8px; font-size: 20px; } .badge { position: absolute; top: 4px; transform: translateX(16px); } } } } @include media-breakpoint-down("md") { .notification-dropdown, .profile-dropdown { bottom: unquote("calc(env(safe-area-inset-bottom) + #{$navbar-height + 2px})"); position: fixed; top: unset; } .profile-dropdown { left: unset; right: unquote("calc(env(safe-area-inset-right) + 15px)"); } .notification-dropdown { left: unquote("calc(env(safe-area-inset-left) + 8px)"); right: unquote("calc(env(safe-area-inset-right) + 8px)"); width: calc(100vw - 16px); } }