[Resolved] Lightweight Social Icons in top right of Site Header

[Michael]

Hi. I’ve looked through past posts here about Lightweight Social Icons but do not see an answer. The goal is to add three social media icon buttons, for FB, Instagram, and Twitter to the far right of the “Whatcom Million Trees Project” centered logo.

To do that, after creating them in LSI, would I add a text widget to the Header? If yes, how do I get that widget to land at far right justified of the centered site logo? Thanks.

[Leo]

Hi Michael,

after creating them in LSI, would I add a text widget to the Header?

Not sure if I fully understand. LSI are widgets so you would just add the LSI widgets in the header widget area.

how do I get that widget to land at far right justified of the centered site logo?

We can help with some CSS once you’ve added the widget in.

[Michael]

Okay, I have LSI added as a widget. Nothing at all appears yet, although the site Header area is now about twice as tall. Please tell me the CSS to add to correct the placement and have them appear. Thanks.

[Leo]

Something should appear by default if it is set up correctly.

Can you provide a screenshot of your widget setup?
https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

[Michael]

(See private info)

[Leo]

Your screenshot shows that you didn’t add in the URL to your social profiles.

[Michael]

Right. I was going to do that next, but first I wanted to get it appearing correct. Is that why they are not appearing?

[Michael]

Okay, I entered those urls and yes they now appear, but centered under the site header. How do I get them to move to top right?

[Leo]

What about something like this?

@media (min-width: 769px) {
    .header-widget {
        position: absolute;
        right: 10px;
    }
}

[Michael]

Great! That’s good progress. Almost there, at last for desktop. 🙂
What CSS can be added to adjust their height positioning?

[Leo]

You can add top: 10px; to the same CSS.

[Michael]

Great… solved for desktop. Thanks. Now, how should I apply the same social media buttons to appear in tablet and mobile formats, but only in the slide-out menu?

[Leo]

I would think off canvas panel widget area is what you are looking for:
https://docs.generatepress.com/article/off-canvas-panel-overview/#off-canvas-panel-widget-area

[Michael]

That solved it well. Thank you! 🙂

[Leo]

No problem 🙂

[Author]

Posts