Archived topic
Align hamburger with secondary menu on mobile
5 replies · Started by Lucy on February 27, 2020
Hi there
I'm trying to get the order of elements in the header on mobile to be secondary navigation, followed by primary navigation (burger), followed by logo.
I have tried extrapolating from this discussion: https://generatepress.com/forums/topic/secondary-menu-in-mobile-view/ but I can't get that burger menu to sit to the right of the secondary navigation - it always stays at the top.
It's possible that once I see how it looks, I might want it to the right of the logo but I assume if I can get it away from that top position deciding whether it goes after the secondary navigation or after the logo should be easy!
Many thanks
Lucy
Hi there,
are you able to provide a mockup image of how you ideally would like them displayed - maybe i am misinterpreting but i cannot see how they would all fit ... let me know :)
Ideally something like this:
https://www.dropbox.com/s/vws6glofrr7l6io/mockup.jpg?dl=0
Of course, I also need to work out how to show only the icons for the phone/email but one step at a time!
If you have suggestions for any better ways of laying it out they're welcome to :-) It's a client request so just trying to find something that everyone's happy with.
Thanks
Lucy
That looks great :)
Lets give this CSS a try.
@media (max-width: 768px) {
/* align flex nav elements vertically center */
.inside-header {
align-items: center;
}
/* flex order secondary nav to firt position */
/* margin-right auto to force space between 2 navs */
.site-header .secondary-navigation {
order: -1;
margin-right: auto;
margin-bottom: 0 !important
}
/* Use flex to vertiaclly align icons and button */
.site-header .secondary-navigation ul {
display: flex;
align-items: center;
}
/* Remove menu labels with font 0 have and increase icon size */
.secondary-navigation .main-nav ul li.top-nav-email a,
.secondary-navigation .main-nav ul li.top-nav-telephone a {
font-size: 0;
background-size: 35px;
}
/* Force site logo to occupy its own row and optional alignment */
.site-logo {
flex: 1 0 100%;
margin-top: 10px;
text-align: right; /* Position image left, center, right */
}
}Fantastic! That works like a dream.
Thank you!
Looks great - glad to be of help :)
