Enable hamburger menu for all screen sizes?

Resolved gruts
(@gruts)

5 years, 4 months ago

Is there an easy(ish) way to enable the hamburger menu for all screen sizes? I’ve had a poke around in the CSS, but it’s all horrendously complicated!

Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)

Chet Pletzke

(@curlytoes)

5 years, 4 months ago

Tried it and it does not work properly.

Oliver Campion

(@domainsupport)

5 years, 4 months ago

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

Thread Starter

gruts

(@gruts)

5 years, 4 months ago

Thanks, Oliver. Worked fine for me.

Thread Starter

gruts

(@gruts)

5 years, 4 months ago