Breakpoint for mobile menu

Thank you — doesn’t work for me but it may be a starting point. What I’d like is to be able to switch to a hamburger at about max-width 500px (or whatever is set for that particular site), and have a dropdown. This switches me to a hamburger at all widths, but clicking on the menu icon brings up the horizontal navigation; I’ll try playing with it to see what I can modify.

Just needs a media query and a little more styling for the li tags …

@media only screen and (max-width: 500px) {
.primary-navigation-open .primary-navigation > .primary-menu-container {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
border: 2px solid transparent;
}
.primary-navigation > div > .menu-wrapper {
padding-bottom: 100px;
padding-left: 0;
}
.primary-navigation-open .primary-navigation {
width: 100%;
position: fixed;
}
.menu-button-container {
display: block;
}
.primary-navigation > .primary-menu-container {
visibility: hidden;
opacity: 0;
position: fixed;
padding-top: calc(var(--button--line-height) * var(--primary-nav--font-size-button) + 42px + 5px);
padding-left: var(--global--spacing-unit);
padding-right: var(--global--spacing-unit);
padding-bottom: var(--global--spacing-horizontal);
background-color: var(--global--color-background);
transition: all 0.15s ease-in-out;
transform: translateY(var(--global--spacing-vertical));
}
.primary-navigation > div > .menu-wrapper li {
display: block;
position: relative;
width: 100%;
}
}

Any good?

Oliver

Yes! Thanks so much! I really appreciate your help with this!