Archived topic
reposition mobile menu above header
3 replies · Started by Jem on September 9, 2018
Hi,
I have main nav floated and aligned right on desktop and would like to have the mobile menu above the header, rather than below as it is now. Is this possible without JS? The site is local but I've supplied the link to a sandbox site which has more or less the same setup.
The brief requires the site to be WCAG 2.1 compliant so I'd prefer not to replicate the primary menu as a secondary menu positioned above the header and show/hide via CSS.
Hi there,
you could try this CSS:
@media (max-width: 768px) {
.inside-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.main-navigation {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
}
Perfect! Thank you so much.
You're welcome