style.css
/**
*
* These styles fix the menu on the site so the drop-down caret is bigger & more clearly separate from the list-item text
*/
:root {
--caret-url: url(caret.png);
--caret-right-url: url(caret-right.png);
--caret-down-url: url(caret-down.png);
}
@media (max-width: 1500px) {
.dropdown-toggle .caret {
margin:0px !important;
border: none !important;
border-left: 1px solid #D9534F !important;
width: 15px !important;
height: 100% !important;
right: 0 !important;
top: 0 !important;
padding-left: 30px !important;
background: var(--caret-url) !important;
background-position: center !important;
background-size: contain !important;
background-repeat: no-repeat !important;
}
li.menu-item li.menu-item .caret {
margin-right: -15px !important;
}
}
details {
margin-left:4px;
margin-bottom: 8px;
}
details > summary {
margin-left: -4px;
padding: 8px;
list-style: triangle !important;
border:none;
border-left: 1px solid #D9534F;
}
details > details {
margin-left: 8px;
}
details > details > summary {
margin-left: -8px;
border-left: 1px solid white;
margin-top:8px;
}
details > details > details {
margin-left: 12px;
}
details > details > details summary {
margin-left: -12px;
border-left: 1px solid #D9534F;
}
/* details > summary::before { */
/* content: "\200B"; */
/* } */
details > summary::marker, /* Latest Chrome, Edge, Firefox */
details > summary::-webkit-details-marker /* Safari */ {
display: block !important;
}
details > summary {
list-style: none;
}
details > summary::before {
margin-left:2px;
margin-right:4px;
content: var(--caret-right-url);
}
details[open] > summary::before {
content: var(--caret-down-url);
margin-left:-2px;
}