Archived topic
Mobile menu width differs for menu v. menu with a mega menu opened
3 replies · Started by Scott on June 24, 2021
We have a simple mobile menu triggered by the toggle. One top level menu item is a mega menu and the rest are not. The mobile menu is set to show mega menus in one column.
When the menu is toggled open, it opens at about the width of the top level menu item names.
When the mega menu item is clicked, the menu expands to 100% width.
If you go back to another sub-menu after this, the menu stays at 100% width.
For a consistent user experience we'd like the whole mobile menu to initially open at 100% width so the width doesn't change while the menu is being used.
Hi there,
try this CSS:
@media(max-width: 768px) {
#site-navigation {
width: 100%;
}
#mega-menu-wrap-primary {
flex: 1;
}
}Thanks David, that helps.
Not sure I like that the site logo is in the left column at some mobile widths and centered above the menu at others but it is good enough for now.
Yeah that mega menu doesn't use any absolute positioning so it expands the entire header.
Add this CSS - may help:
@media(max-width: 1000px) and ( min-width: 769px) {
#masthead .inside-header {
align-items: flex-start;
}
} 