[Resolved] Social Media Secondary Menu

[elsa]

Hi, how to make social media secondary menu similar to this site, both on desktop and mobile?

[Tom]

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/

[elsa]

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.

[Tom]

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

[elsa]

As follow,

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

[elsa]

[elsa]

This is 1 row below header

[Tom]

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.

[elsa]

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?

[Tom]

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?

[elsa]

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

[Leo]

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

[elsa]

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

[Tom]

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>

[elsa]

Cool! working like a charm!

[Author]

Posts