[Resolved] Items side by side in mobile menu?

[Jennifer]

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.

[David]

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/

[Jennifer]

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%;	
  }
}

[David]

Glad to hear you found a solution … and that is a nice method 🙂

[Author]

Posts