adam/wp-rdnyc
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

improved and streamlined menu display

Browse source
This commit is contained in:
Adam Piontek 2021-07-27 08:16:01 -04:00
parent 311b918077
commit 8e0c08eb72
3 changed files with 49 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/css/_bs-custom.scss
View file

@ -2,6 +2,10 @@
// Typography
$font-size-base: 1.125rem;
$line-height-base: 1.35;
$line-height-sm: 1.15;
$line-height-lg: 1.75;
// 'native font stack' for sans via https://getbootstrap.com/docs/5.0/content/reboot/#native-font-stack
$font-family-sans-serif:

40
assets/css/_nav-bar-help.scss
View file

@ -94,6 +94,7 @@ nav#top-navbar-grid-outer {
div#top-navbar-grid-main-menu-outer {
@include media-breakpoint-down(lg) {
display: none;
margin: 1em 0 0 0;
&.show, &.collapsing {
display: grid;
grid-column-start: 1;
@ -105,6 +106,7 @@ nav#top-navbar-grid-outer {
}
@include media-breakpoint-up(lg) {
display: grid;
margin: 0 !important;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
@ -113,20 +115,19 @@ nav#top-navbar-grid-outer {
align-items: end;
}
ul#menu-navbar-main-menu {
list-style: none;
@extend .d-grid;
grid-template-columns: 1fr;
list-style: none;
padding: 0;
margin: 1em 0 0 0;
@extend .d-lg-inline;
@include media-breakpoint-up(lg) {
margin: 0;
}
li.menu-item {
@extend .d-lg-flex;
@extend .flex-lg-row;
@extend .p-0;
@extend .m-0;
& > li.menu-item {
@extend .text-center;
@extend .py-2;
@extend .d-lg-inline;
@extend .my-2;
@extend .my-lg-0;
@include media-breakpoint-up(lg) {
display: list-item;
padding: 0 0 0 1.5em !important;
}
.top-navbar-grid-main-menu-item-link {
@ -157,7 +158,7 @@ nav#top-navbar-grid-outer {
&.show {
color: $primary;
&:hover {
text-decoration: none !important;
@extend .text-decoration-none;
}
div.icon.baseline {
transform: rotate(180deg);
@ -165,27 +166,28 @@ nav#top-navbar-grid-outer {
}
}
&::after {
display: none;
@extend .d-none;
}
}
.dropdown-menu.dropdown-menu-dark {
background-color: shade-color($gray-800, 50%);
li.menu-item {
padding: 4px 0 !important;
.top-navbar-grid-main-menu-item-link {
display: block;
width: 100%;
padding: .25rem 1rem 0 1rem;
.dropdown-item.top-navbar-grid-main-menu-item-link {
@extend .fw-normal;
padding: 0.25rem 1rem 0 1rem !important;
text-transform: inherit !important;
&:hover {
text-decoration: none !important;
@extend .text-decoration-none;
color: $gray-900;
background-color: $primary;
}
}
&.active {
.dropdown-item.top-navbar-grid-main-menu-item-link {
color: $gray-900;
background-color: shade-color($primary, 25%);
&:hover {
text-decoration: none !important;
@extend .text-decoration-none;
background-color: $primary;
}
}

13
src/classes.php
View file

@ -59,7 +59,7 @@ add_filter( 'nav_menu_link_attributes' , function( $atts, $item, $args ) {
class RDNYC_Menu_Walker extends Walker_Nav_Menu {
function start_lvl(&$output, $depth = 0, $args = array()) {
$output .= "\n<ul class=\"dropdown-menu dropdown-menu-dark dropdown-menu-end\">\n";
$output .= "\n<ul class=\"dropdown-menu dropdown-menu-dark dropdown-menu-lg-end\">\n";
}
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
@ -67,10 +67,14 @@ class RDNYC_Menu_Walker extends Walker_Nav_Menu {
parent::start_el($item_html, $item, $depth, $args);
if ( $item->is_dropdown && $depth === 0 ) {
$item_html = str_replace( '<a', '<a class="dropdown-toggle top-navbar-grid-main-menu-item-link" data-bs-toggle="dropdown"', $item_html );
$item_html = str_replace( '<a', '<a class="dropdown-toggle top-navbar-grid-main-menu-item-link" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"', $item_html );
$item_html = str_replace( '</a>', inline_svg( 'bsi-chevron-down', array( 'div_class' => 'icon baseline ms-1' ) ) . '</a>', $item_html );
}
if ( $item->menu_item_parent && $item->menu_item_parent > 0 && $depth > 0 ) {
$item_html = str_replace( '<a', '<a class="dropdown-item top-navbar-grid-main-menu-item-link"', $item_html );
}
$output .= $item_html;
}
@ -80,12 +84,11 @@ class RDNYC_Menu_Walker extends Walker_Nav_Menu {
$element->is_dropdown = !empty( $children_elements[$element->ID] );
if ( $element->is_dropdown ) {
if ( $depth === 0 ) {
if ( $element->is_dropdown && $depth === 0 ) {
$element->classes[] = 'dropdown';
}
}
parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
}
}