From 8e0c08eb72f8c4c17ec933ed6616a0d86f9d1867 Mon Sep 17 00:00:00 2001 From: Adam Piontek Date: Tue, 27 Jul 2021 08:16:01 -0400 Subject: [PATCH] improved and streamlined menu display --- assets/css/_bs-custom.scss | 4 ++++ assets/css/_nav-bar-help.scss | 42 ++++++++++++++++++---------------- src/classes.php | 43 +++++++++++++++++++---------------- 3 files changed, 49 insertions(+), 40 deletions(-) diff --git a/assets/css/_bs-custom.scss b/assets/css/_bs-custom.scss index 3184a49..076f353 100644 --- a/assets/css/_bs-custom.scss +++ b/assets/css/_bs-custom.scss @@ -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: diff --git a/assets/css/_nav-bar-help.scss b/assets/css/_nav-bar-help.scss index c325e83..e830d44 100644 --- a/assets/css/_nav-bar-help.scss +++ b/assets/css/_nav-bar-help.scss @@ -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 { + } + &.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; } } diff --git a/src/classes.php b/src/classes.php index b6023a9..4be1d62 100644 --- a/src/classes.php +++ b/src/classes.php @@ -59,33 +59,36 @@ 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