improved and streamlined menu display
This commit is contained in:
parent
311b918077
commit
8e0c08eb72
3 changed files with 49 additions and 40 deletions
|
@ -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:
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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<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) {
|
||||
$item_html = '';
|
||||
parent::start_el($item_html, $item, $depth, $args);
|
||||
$item_html = '';
|
||||
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>', inline_svg( 'bsi-chevron-down', array( 'div_class' => 'icon baseline ms-1' ) ) . '</a>', $item_html );
|
||||
}
|
||||
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" 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 );
|
||||
}
|
||||
|
||||
$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) {
|
||||
if ( $element->current )
|
||||
$element->classes[] = 'active';
|
||||
$output .= $item_html;
|
||||
}
|
||||
|
||||
$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 ) {
|
||||
if ( $depth === 0 ) {
|
||||
$element->classes[] = 'dropdown';
|
||||
}
|
||||
}
|
||||
$element->is_dropdown = !empty( $children_elements[$element->ID] );
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue