Archived topic
Items side by side in mobile menu?
3 replies · Started by Jennifer on January 11, 2021
In my mobile menu, beneath the other list items (which I want to appear one per row), I would like to have the two social icons display side by side on one row. Can this be done through CSS or would I need to create a hook element to achieve this? I've provided the URL for my development server in the private information section.
Hi there,
yes you would need to a Hook element - you can use the generate_menu_bar_items hook - this article explains:
https://docs.generatepress.com/article/generate_menu_bar_items/
Thanks for the link! It wasn't quite what I was looking for (I wanted to add the icons to the bottom of the mobile menu itself, not to the menu bar). But I figured it out. In case it helps anyone, this worked for me:
@media (max-width: 768px) {
#mobile-menu .facebook-icon {
display: inline-flex;
justify-content: flex-end;
padding-right: 5px;
width: 50%;
}
#mobile-menu .linkedin-icon {
display: inline-flex;
justify-content: flex-start;
padding-left: 5px;
width: 49%;
}
}Glad to hear you found a solution ... and that is a nice method :)
