Archived topic

Header with logo on left and social media icon widget to right

5 replies · Started by mavrocreative on May 28, 2019

Viewing posts 1–6 of 6

May 28, 2019 at 1:41 pm #913712

Hi there,

We wanted to have our logo on the left and social media icons to the right and have it be above the navigation.

This is the result:

We accomplished this by having the header left aligned and then added padding.

But on mobile, the social media icons disappear. I "think" I need to use hooks to get them to appear on mobile but haven't used them before.

Is this the best way to accomplish what I'd like to do?

THank you!

Donna

May 28, 2019 at 2:17 pm #913729

Hi there,

So are you happy with the current layout on desktop?

As for mobile, can you try reducing the header padding with mobile toggle first?
https://docs.generatepress.com/article/header-padding/

Let me know :)

May 28, 2019 at 2:25 pm #913740

Hi Leo,

Yes! Thank you! That worked!

Is there a way for me to center the social media icon widget?

Donna

May 28, 2019 at 2:36 pm #913745

Try this CSS:

@media (max-width: 768px) {
    .header-widget .lsi-social-icons {
        text-align: center;
    }
}

May 28, 2019 at 3:26 pm #913780

Thank you!

Donna

May 28, 2019 at 4:14 pm #913824

No problem :)

This archived topic is closed to new replies.