Skip to content

Instantly share code, notes, and snippets.

@cdsaenz
Created March 2, 2023 13:32
Show Gist options
  • Save cdsaenz/c6f51b608ee93c6cde7d15e8b225b391 to your computer and use it in GitHub Desktop.
Save cdsaenz/c6f51b608ee93c6cde7d15e8b225b391 to your computer and use it in GitHub Desktop.
/**
* NAVWALKER BOOTSTRAP 5
* Extra levels
*/
.navbar.navbar-expand-lg .dropdown .dropdown-menu .dropdown-submenu {
/* dropdown sub menu positioning */
margin: 0;
left: 100%;
}
.dropdown-menu {
padding: 0;
border-radius: 4px;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%);
}
.dropdown .dropdown-submenu {
top: 0;
left: 100%;
margin-left: 0.125rem;
}
.navbar .dropdown-item {
padding: 0.5rem 1.8rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
/* Item that could be selected now */
background: #7aacde !important;
color: white !important;
}
.dropdown-item.active,
.dropdown-item:active {
/* Selected item (ie page now active) */
background-color: transparent;
color: #212529;
font-weight: 600;
}
.nav-item a {
/* ensure No flashing in links */
transition: none !important;
}
.navbar-nav li:hover>ul.dropdown-menu {
/* controversial will open on hover */
/* display: block; */
font: inherit;
}
@media (min-width: 992px) {
/* ONLY DESKTOP - Convert toggle to right > in deeper levels */
.at_depth_1 .dropdown-toggle::after,
.at_depth_2 .dropdown-toggle::after,
.at_depth_3 .dropdown-toggle::after {
display: inline-block;
margin-left: 1.5em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
left: 0;
/* rotate right */
-ms-transform: rotate(-90deg);
/* IE 9 */
-webkit-transform: rotate(-90deg);
/* Chrome, Safari, Opera */
transform: rotate(-90deg);
}
}
@media (max-width: 991.98px) {
/* Smaller devices remove shadow & border from children */
.offcanvas .dropdown-menu {
border: none;
box-shadow: none;
}
/* Smaller devices offcanvas, add indent */
.depth_1 .dropdown-item {
margin-left: 10px;
}
.depth_2 .dropdown-item {
margin-left: 15px;
}
.depth_3 .dropdown-item {
margin-left: 20px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment