Mobile Main navigation icons horizontally

Hi there,

I would recommend to add the social icons using a hook element or block element.
https://docs.generatepress.com/article/hooks-element-overview/
https://docs.generatepress.com/article/block-element-overview/

If you are not familiar with HTML, then block element would be easier.

Once the content is added to the element, choose entire site as location, choose hookas block type if you are using a block element, choosegenerate_menu_bar_items as hook name.

Once the element is created, remove the menu items from the primary navigation.

Then we can use some CSS to hide the menu toggle on mobile.

Let me know how it works :)

Hey thanks for your answer Ying ;)
It works on desktop, but I cannot see them on mobile. Anything that I missed? Or it is just a matter of removing the toggle?

Thanks!

Try this CSS:

.menu-bar-items ul.wp-block-social-links {
    display: flex !important;
}
.main-navigation button.menu-toggle {
    display: none;
}

Let me know :)

Awesome! One last thing, sorry. Any clue to align them centered?

Thankssssssssssssss

Yes, add this CSS as well :)

.main-navigation .inside-navigation.grid-container {
    justify-content: center;
}

Wow, I love you guys, best support ever!!!
Thank you so much :)

Happy to hear that and you are very welcome!