Code Injection (Site Header)
< style >
@media (max-width: 63.99em) {
.c-nav__dropDown {
margin-left: var(--space-16);
}
.c-nav__dropDown .c-nav__item {
margin-bottom: 0;
}
}
@media (min-width: 64em) {
.c-nav__dropDown {
position: absolute;
top: var(--space-16);
z-index: 1;
opacity: 0;
visibility: hidden;
padding: var(--space-8);
border-radius: var(--space-8);
background-color: var(--color-background-secondary);
border: 0.5px solid var(--color-border-primary);
}
.c-nav__dropDown .c-nav__item {
margin: 0 !important;
}
.c-nav__dropDown .c-nav__link {
padding: var(--space-8) var(--space-16);
border-radius: var(--global-border-radius);
}
.c-nav__dropDown .c-nav__link:hover, .c-nav__dropDown .c-nav__link:active, .c-nav__dropDown .c-nav__link:focus {
background-color: var(--color-background-primary);
}
}
@media (min-width: 64em) {
.c-nav__item:not(:last-child) {
margin-right: var(--space-24);
}
}
@media (max-width: 63.99em) {
.c-nav__item {
margin-bottom: var(--space-16);
}
}
@media (min-width: 64em) {
.c-nav__item--hasDropDown {
position: relative;
}
.c-nav__item--hasDropDown > .c-nav__link:after {
content: "↓";
padding-left: var(--space-4);
}
.c-nav__item--hasDropDown:hover > .c-nav__link, .c-nav__item--hasDropDown:active > .c-nav__link, .c-nav__item--hasDropDown:focus > .c-nav__link {
color: var(--color-text-primary);
}
.c-nav__item--hasDropDown:hover .c-nav__dropDown, .c-nav__item--hasDropDown:active .c-nav__dropDown, .c-nav__item--hasDropDown:focus .c-nav__dropDown {
opacity: 1;
visibility: visible;
}
}
</ style >
Code Injection (Site Footer)
< script >
var dropDown_list = [ ] ,
latest_navigation_item ,
nav_list = document . querySelectorAll ( '.c-nav--left .c-nav__item' ) ;
var newMenuList = [ ] ;
var menuTree = { } ;
nav_list . forEach ( ( item , index ) => {
if ( item . childNodes [ 1 ] . innerText . startsWith ( '-' ) ) {
if ( menuTree [ newMenuList . length - 1 ] ) {
menuTree [ newMenuList . length - 1 ] . push ( item ) ;
} else {
menuTree [ newMenuList . length - 1 ] = [ item ] ;
}
} else {
newMenuList . push ( item ) ;
}
} ) ;
nav_list = newMenuList . map ( ( item , index ) => {
if ( menuTree [ index ] ) {
let dropdown = document . createElement ( 'ul' ) ;
dropdown . className = 'c-nav__dropDown o-plain-list' ;
menuTree [ index ] . forEach ( child => {
dropDown_item_text = child . childNodes [ 1 ] . innerText ;
child . childNodes [ 1 ] . innerText = dropDown_item_text . replace ( '- ' , '' ) ;
dropdown . appendChild ( child ) ;
} ) ;
item . className += ' c-nav__item--hasDropDown' ;
item . appendChild ( dropdown ) ;
}
return item ;
} ) ;
</ script >
Navigation ( - and space
before subitems )