Site logo

Archived topic

Vertically center widget in header

5 replies · Started by Bryan on July 25, 2017

Viewing posts 1–6 of 6

In my header I have the Lightweight Social Icons on the right part of the header and a logo in the left hand part of the header.

The logo's height is 55 px. The social icons height is 44px. I want to vertically center the icons on the left. By default they are at the top of the container.

The problem seems to be that there is padding of 8px on the bottom of each li item in the Social Icons widget.

How can I get the content in my social widgets to be vertically aligned with the middle?

Thanks

Hi there,

Can you give this CSS a shot and adjust the px number?

@media (min-width:769px) {
    .header-widget {
        padding-top: 10px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

If this doesn't work any chance you can provide a link to your site? Thanks!

This worked perfectly. Thank you Leo.

I have one more question if you don't mind.

I have a footer bar at the bottom of the page. It is just one line, but has a background color.

I have a footer on top of the footer bar.

This works fine as long as the content's height is tall enough. If it is not, then the the footer bar becomes very large and the site doesn't look correct.

Here is an image explaining the issue:

Footer Bar too big

Can you link me to the page possibly?

It is behind a password right now. Let me know your email address and I will email the password to you.

This archived topic is closed to new replies.