[Support request] Putting social media icons in header

[HEATHER]

Hi can anybody walk me through putting my social media icons in the top right section of my header? Thank you.

[Leo]

Hi there,

Try Lightweight social icons in the header widget area:
https://en-ca.wordpress.org/plugins/lightweight-social-icons/
https://docs.generatepress.com/article/header-widget/

Let me know if this helps 🙂

[melonbird]

This doesn’t work if you have “Use Navigation as Header” checked. Is there an alternative method that would display it inline on desktop and in the mobile menu under the normal menu? Or a way to add them to the normal menu?

[David]

Hi there,

for it to appear as part of the normal mobile dropdown menu then the icons would have to be added as items in your menu.
The Navigation Label in a menu item does support HTML.

[melonbird]

I tried adding a Custom Label to the menu with the HTML from source code from the Lightweight Social Icons plugin copied into the Navigation label. Nothing is showing.

[David]

Can you share a link to the site ?

[melonbird]

Not able to, sorry.

[David]

OK, see this doc:

https://docs.generatepress.com/article/adding-icons-to-menu-items/

theres a link at the top for a plugin that does it for you

[melonbird]

Thanks. I already looked at these, but both involve adding Font Awesome, which adds weight to the page. Lightweight Social Icons adds a font which Google Pagespeed dings me for on speed. I really just want to add some simple, small icons with links, which I can do as a widget but can’t figure out how to add to the menu. I guess this is a WP issue and a not a GeneratePress issue, though, so I’ll look somewhere else for a solution.

I also tried to do this with Generate Blocks, but couldn’t get it to show up inside the menu rather than in the menu bar.

[Ying]

I tried adding a Custom Label to the menu with the HTML from source code from the Lightweight Social Icons plugin copied into the Navigation label. Nothing is showing.

SVG code didn’t work in navigation label field, but it seems working now, I just tested on my testing site.

Can you share the source code you entered?

[melonbird]

Okay wait. While I was responding to Ying, I realized a mistake I made and fixed that. So now I’ve got them showing in the menu now using the code from Lightweight Social. The only problem is that I’d love them to be in a horizontal row in the mobile menu like they are on desktop. Can that be done with CSS without changing the desktop display?

[David]

Try adding this CSS:

@media(max-width: 768px) {
    .mobile-menu-open .main-nav>ul {
        display: flex !important;
    }

    .main-nav>ul>li.menu-icon {
        flex: 0 1 60px;
    }
}

then give each of the icon menu items a CSS class of menu-icon

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

[melonbird]

Oh wow – perfect! Thanks for sticking with me on this.

[David]

Awesome – glad to hear that worked 🙂

[Author]

Posts