|
/*PHP Code at https://gist.github.com/cdsaenz/d6d65294d79a0b71b95c55a4bbd47f7d*/ |
|
/*version 2: revised for responsive on mobile, dropdown menu will open on hover for now (avoids js) */ |
|
.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; |
|
} |
|
|
|
@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; |
|
} |
|
} |
