Archived topic
Stack menu items vertically in top bar on mobile
3 replies · Started by Lucy on May 26, 2021
Viewing posts 1–4 of 4
Hi there
I have used Navigation Menus in the Top Bar widget to add links in the top bar (phone number, etc.).
I would like these to stack vertically on mobile - at the moment they stay side by side which causes them to wrap strangely. Does that make sense?
You can see the site I am working on here: https://wordpress-504061-1892322.cloudwaysapps.com/
Thank you!
Hi Lucy,
Try adding this CSS:
@media( max-width: 768px ){
.top-bar .inside-top-bar .widget_nav_menu ul.menu {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
}
.inside-top-bar {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
}
}This is how it will look like - https://share.getcloudapp.com/nOuPz4Le
That's great thank you. I've used that code and tweaked the margins of the individual elements and looks perfect now. Thanks!
No problem. Glad it works for you. :)
This archived topic is closed to new replies.
