Enable hamburger menu for all screen sizes?

Tried it and it does not work properly.

OK, try this …

.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));
}

… if that doesn’t work for you, please can you provide more detail as to how you are looking for this to work?

Thanks,

Oliver

Thanks, Oliver. Worked fine for me.

…Sorry, forgot to mark as Resolved.

Awesome. Will report back when it’s an option in the plugin.

Will also remove the use of var() in the CSS for the plugin as it’s not compatible with IE11.

Oliver