Skip to content

Commit

Permalink
Fix dropdown layout in mobile menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@albig
albig committed Oct 28, 2024
1 parent 06f261c commit 5c341d8
Show file tree
Hide file tree
Showing 2 changed files with 135 additions and 77 deletions.
6 changes: 4 additions & 2 deletions inc/class-wp-bootstrap-navwalker.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,6 @@ public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0
if ( isset( $args->has_children ) && $args->has_children && 0 === $depth && $args->depth > 1 ) {
$item_has_children = true;
$atts['href'] = empty( $item->url ) ? '#' : $item->url;
$atts['data-bs-toggle'] = 'dropdown';
$atts['aria-haspopup'] = 'true';
$atts['aria-expanded'] = 'false';
$atts['class'] = 'dropdown-toggle nav-link';
Expand Down Expand Up @@ -310,7 +309,10 @@ public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0
$item_output .= $args->after ?? '';

if ( $item_has_children ) {
$item_output .= '<div class="submenu-opener" data-bs-toggle="dropdown"><i class="fas fa-angle-down" ></i></div>';
$item_output .= '
<button class="toggle submenu-expand submenu-opener" data-toggle-target="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
<span class="screen-reader-text">' . esc_attr__( 'Show sub menu', 'sunflower' ) . '</span>
</button>';
}

/**
Expand Down
206 changes: 131 additions & 75 deletions sass/_navigation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,17 @@
div.dropdown-menu {
display: block;

margin-top: 54px;

&.show {
margin-top: 4px;
}

ul {
border-radius: 0;
}
}

}
}
}
Expand Down Expand Up @@ -113,6 +120,10 @@
}

.navbar {

$dropdown-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$body-color}' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>") !default;
$dropdown-button-icon-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$secondary}' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>") !default;

padding: 0;

&-main {
Expand All @@ -124,30 +135,85 @@
&-light {

.navbar-nav {
align-items: center;
align-items: normal;

>.nav-item {

border-bottom: 4px solid transparent;
padding: 4px 0;
display: flex;


&.active {

>a {
color: $secondary;
}

&.current-menu-parent {
>a {
color: $body-color;
}
}

}

&:hover {

@include media-breakpoint-up(lg) {
border-bottom: 4px solid $secondary;
padding-bottom: 0;
}
}

&.menu-item-has-children {

.submenu-opener {
color: $black;
font-size: 18px;
flex-wrap: wrap;
justify-content: space-between;

button.submenu-opener {
border: none;
background: none;
background-image: #{escape-svg($dropdown-button-icon)};
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
transition: transform 0.2s ease-in-out;
font-weight: 700;
right: var(--wp--preset--spacing--50);

&.show {
content: "";
transform: rotate(-180deg);
background-image: #{escape-svg($dropdown-button-icon-hover)};
}
}

&:hover {
button.submenu-opener {
background-image: #{escape-svg($dropdown-button-icon-hover)};
}
}
}

.dropdown-toggle {

text-align: end;

&::after {
display: none;
}

}

&.button-highlight {

a {
> a {

background-color: $secondary;
border-radius: 9999px;
text-align: left;
padding: 11px 14px 7px 14px;
margin-left: -7px;

&.nav-link {
color: $white;
Expand All @@ -156,7 +222,7 @@

&.menu-item-has-children {

.submenu-opener {
.dropdown-toggle {
color: $white;
}

Expand All @@ -165,25 +231,13 @@

}

.button-highlight {
background-color: $secondary;
cursor: pointer;
padding: 0 0.5rem;
margin: 0.2rem;
border-radius: 9999px;
order: 0;
white-space: nowrap;
max-height: 4em;

}


.nav-link {
color: $body-color;
font-size: 18px;
padding: 11px 0 7px 0;
margin-right: 0.5rem;
margin-left: 0.5rem;
text-align: left;

&:hover {
color: $secondary;
Expand Down Expand Up @@ -220,7 +274,6 @@
display: none;
}


.dropdown {

&-menu {
Expand Down Expand Up @@ -251,6 +304,13 @@
border: 0;
box-shadow: 0 25px 20px rgba(0, 0, 0, 0.1);
}

ul li {

&:not(:first-child) {
border-top: 1px solid $very-light-gray;
}
}
}

&-1 {
Expand All @@ -272,31 +332,38 @@
display: block;
border-radius: 4px;
margin-right: 0;
margin-top: -4px;
overflow: hidden;
border: 1px solid $white;
list-style-type: none;
background: $white;
background-color: $white;
padding: 0;
margin-bottom: -1px;

li {
padding: 0;
margin-right: 0;

&.active {

>a {
color: $secondary;
}

&.current-menu-parent {
>a {
color: $body-color;
}
}
}

a {
font-size: 18px;
text-transform: none;
font-weight: 700;
padding-top: 10px;
padding-bottom: 10px;

@include media-breakpoint-up(lg) {
border-bottom: 1px solid $very-light-gray;
}

&:hover {
color: $white;
background: $secondary;
color: $secondary;
}

&:focus-visible {
Expand All @@ -307,81 +374,70 @@
}
}

&-submenu {
list-style-type: none;
padding-left: 0;
margin-left: 0;

ul {

li {
text-transform: none;

a {
font-size: 18px;
font-weight: 400;
}
}
}
}

&-item {
display: flex;
align-items: center;
justify-content: space-between;

&.has-children {
margin-right: 2em;
}

&:hover {
background-color: $white;
}
}

}

.dropdown-toggle {

&::after {
display: none;
}
}

#mainmenu {

>li {
text-transform: uppercase;

&.menu-item-has-children {
display: flex;
align-items: baseline;
flex-wrap: wrap;

@include media-breakpoint-up(lg) {
flex-wrap: nowrap;
}

a {
flex-basis: auto;
}

ul li {
display: block;
}

.dropdown-menu {
flex: 100%;
top: 100%;

>ul {
margin-top: 20px;
}
}

}
}
}

.navbar-nav {
// specific settings to the collapse (mobile) menu
.navbar-collapse {
display: block;
width: 100%;
margin-left: 10px;

&.collapse.show {

li {
text-align: end;
border-top: 1px solid $very-light-gray;
padding-left: 14px;
}

.dropdown {

&-menu {

ul {
margin-top: 0;
}

.dropdown-menu {
position: static;
&.show {
width: 100%;
}
}

&-item {
justify-content: start;
}
}
}
}

0 comments on commit 5c341d8

Please sign in to comment.