Social Media Secondary Menu

That site is using the Secondary Navigation set to float right.

Then they added icons to the menu using this method: https://docs.generatepress.com/article/adding-icons-to-menu-items/

Hi Tom, how to make it 2 rows in desktop?

While on mobile, how to make it appear in 1 row below header, since I already use slideout menu.

Can you show me what you mean by 2 rows? Any examples?

As follow,

While in mobile, how to put it 1 row below header.

This is 1 row below header

I wonder if it would be better to use a plugin like Lightweight Social Icons inside the Header widget area?

That way you should get two rows automatically.

Hi Tom,
Thanks I've already use the plugin and insert within the widget. I still haven't found out how to make it 2 rows, there is no setting option in the plugin. Also how to make it appear on mobile phone?

You can set the header widget width to make them appear in rows. The width depends on the number of items:

.header-widget {
    max-width: 150px;
}

Where would you like them to appear on mobile?

Hi Tom,
I'd like to put it under header on mobile phone.

This should help: https://docs.generatepress.com/article/header-widget/#showing-your-header-widget-below-other-header-elements-on-mobile

Hi Leo,
It moved the logo, but the widget didn't appear.

Since you're using the mobile header, you'll likely need to create a separate widget for it.

1. Install and activate this plugin: https://en-ca.wordpress.org/plugins/widget-shortcode/

2. Add a new Lightweight Social Icons widget to the area it creates, and grab the shortcode.

3. In GP Hooks, do this in the "After Header" hook:

<div class="mobile-social-icons hide-on-desktop hide-on-tablet">
    SHORTCODE IN HERE
</div>

Cool! working like a charm!