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 // Typography
$font-size-base: 1.125rem; $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 // 'native font stack' for sans via https://getbootstrap.com/docs/5.0/content/reboot/#native-font-stack
$font-family-sans-serif: $font-family-sans-serif:

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

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

43
src/classes.php
View file

@ -59,33 +59,36 @@ add_filter( 'nav_menu_link_attributes' , function( $atts, $item, $args ) {
class RDNYC_Menu_Walker extends Walker_Nav_Menu { class RDNYC_Menu_Walker extends Walker_Nav_Menu {
function start_lvl(&$output, $depth = 0, $args = array()) { 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) { function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
$item_html = ''; $item_html = '';
parent::start_el($item_html, $item, $depth, $args); parent::start_el($item_html, $item, $depth, $args);
if ( $item->is_dropdown && $depth === 0 ) { 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 ); $item_html = str_replace( '</a>', inline_svg( 'bsi-chevron-down', array( 'div_class' => 'icon baseline ms-1' ) ) . '</a>', $item_html );
} }
$output .= $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 );
}
function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) { $output .= $item_html;
if ( $element->current ) }
$element->classes[] = 'active';
$element->is_dropdown = !empty( $children_elements[$element->ID] ); function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
if ( $element->current )
$element->classes[] = 'active';
if ( $element->is_dropdown ) { $element->is_dropdown = !empty( $children_elements[$element->ID] );
if ( $depth === 0 ) {
$element->classes[] = 'dropdown'; if ( $element->is_dropdown && $depth === 0 ) {
} $element->classes[] = 'dropdown';
} }
parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
}
parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
}
} }