/* @media screen and (max-width: 767px) { .navbar-collapse.show { background: rgba(255,255,255,0.9); } .navbar-dark .navbar-collapse.show, [data-bs-theme="dark"] .navbar-collapse.show { background: rgba(var(--bs-body-color-rgb),0.9); } } */ @media screen and (min-width: 767px) { .nav-toggle { &.show { .nav-item.dropdown .dropdown-toggle + .dropdown-menu { transform: translateY(0); opacity:1; visibility:visible; } } } .dropdown-menu { box-shadow: 0 0 28px rgba(var(--bs-body-color-rgb),.2); border: none; p:empty { display: none; } &.w-100 { left: 0; margin: auto; } &.login-box { min-width:320px; padding:1.5rem; } } .nav-item.dropdown { .nav-item.dropdown > a:after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid transparent;; border-right: 0.3em solid transparent; border-bottom: 0.3em solid transparent; border-left: 0.3em solid; right: 0.5rem; top: 40%; position: absolute; } /* > .nav-link.dropdown-toggle { display:none; } &.has-dropdown { > .nav-link.dropdown-toggle { display:block; } } */ .dropdown-menu { top: auto; -ms-transform: translateY(20px); transform: translateY(20px); opacity: 0; display: block; visibility: hidden; transition: opacity .5s cubic-bezier(.19,1,.22,1),transform .5s cubic-bezier(.19,1,.22,1),right 0s linear .5s; } .dropdown-menu-end { right: 0; } .dropdown-menu-start { left: 0; } &:hover, /* &:active, &:target */ &:focus, &:focus-within, &:focus-visible{ > .dropdown-toggle + .dropdown-menu, > .dropdown-menu { transform: translateY(0); opacity: 1; visibility:visible; transition: opacity .5s cubic-bezier(.19,1,.22,1),transform .5s cubic-bezier(.19,1,.22,1); } } > .dropdown-menu .dropdown-menu { left: 100%; margin-top: auto; top: 0; } .dropdown-toggle + .dropdown-menu { top: auto; //margin-top: -1rem; -ms-transform: translateY(20px); transform: translateY(20px); opacity: 0; display: block; transition: opacity .5s cubic-bezier(.19,1,.22,1),transform .5s cubic-bezier(.19,1,.22,1),right 0s linear .5s; box-shadow: 0 0 28px rgba(var(--bs-body-color-rgb),.2); border: none; &.show { transform: translateY(0); opacity:1; visibility:visible; } &:hover { > .dropdown-menu { transform: translateY(0); opacity: 1; transition: opacity .5s cubic-bezier(.19,1,.22,1),transform .5s cubic-bezier(.19,1,.22,1); } } .dropdown-item { padding: .7rem 2.5rem; //color: #555; } } } } .navbar-main .navbar-nav a.nav-link, .navbar .navbar-nav a.nav-link span:last-child { display:inline-block; white-space: nowrap; } .navbar-nav a.nav-link span > p:last-child { margin-bottom:0; } .navbar-main.sticky { transition:0.5s background; background-color:rgba(var(--bs-body-bg-rgb), 0.9); //box-shadow:0 0 5px 2px rgba(var(--bs-body-color-rgb), 0.05); &.navbar-light { background-color:var(--bs-body-bg); background-color:rgba(var(--bs-body-bg-rgb), 0.9); } &.navbar-dark { background-color:var(--bs-body-bg); background-color:rgba(var(--bs-body-bg-rgb), 0.9); } } .navbar-main { .navbar-collapse { position:relative; } }