Archived topic
Mobile Menu with some horizontal elements
5 replies · Started by Davide on April 6, 2020
Hi,
I added a mobile menu with this procedure --> https://docs.generatepress.com/article/using-a-different-menu-on-mobile/
Everything's working fine.
The menu is pretty "classic", with the elements listed "vertically".
Is there a way to have the last XX elements of a menu displayed horizontally instead of vertically like the other?
here's an example --> https://www.dropbox.com/s/9d7acwiegjdli5d/menu.png?dl=0
For example, the social icons (see screenshot above).
thank you
Davide
Hi there,
not easily with the default Mobile Menu as all menu items would be in the same list.
Have you got a link where i can see the menu with all the items in place ?
Hi David,
I edited the first message, now with the link.
Thank you!
Davide
Try this CSS:
#mobile-header.toggled .main-nav > ul {
display: flex !important;
flex-wrap: wrap;
}
.main-navigation.toggled .main-nav li {
flex-basis: 100%;
}
.main-navigation.toggled .main-nav li:nth-last-child(-n+3) {
flex-basis: 50px;
}this nth-last-child(-n+3) specifies the last 3 elements in the list. you can increase or decrease the +3
And this flex-basis: 50px; defines the preferred width of those elements.
magnificent, thank you! :)
Davide
You're welcome
