[Resolved] Aligning social icons in header widget

[Nimie]

When I add the social icons in the widget and then try to adjust the position it moves my site logo off center. Would like them to the right of logo with space between them and centered. Now they display far right and close together. When I add padding it moves the logo left.

[Tom]

Hi there,

This happens because the header widget takes up space on the same line as the logo, so it shifts the logo to the left.

It’s kind of a pain to fix, but I can give you some CSS if you’d like to share your URL.

Thanks!

[Nimie]

Thanks. I had it worked out using a header designed with Elementor but couldn’t figure out how to use hooks to place it between the top bar and menu. Then thought about adding the top bar to the header but is was becoming a bit of a time drain. https://suncoastwebmarketing.com/

[Tom]

Give this CSS a shot:

@media (min-width: 769px) {
    .inside-header {
        position: relative;
    }
    
    .header-widget {
        position: absolute;
        right: 30px;
        top: 30px;
    }
}

[Nimie]

Thanks, that did it!

[Tom]

Awesome! Glad I could help 🙂

[Author]

Posts