Vertically center Header(logo) Image

[seanlincoln]

Hi,
Is it possible to vertically center the header image (logo) on this site?
I have cropped the image so that the edge of all sides is the edge of the text.

although it doesn’t look too bad now, its even worse when in mobile version as the mobile hamburger icon is not aligned with the logo.

so can i get it vertically aligned in both desktop and mobile?

any help would be great

http://astraframe.co.uk/astra/

[thai]

Hi There,

Please add the following CSS under X > Theme Options > CSS:

.x-brand img {
    vertical-align: top;
}
@media (max-width: 979px){
    .x-brand {
        margin-top: 12px
    }
}
@media (max-width: 380px){
    .x-brand {
        margin-top: 28px;
    }
    .x-brand img {
        width: 150px !important;
    }
}

Hope it helps

[seanlincoln]

Hi thanks for the response the issue with that is that it’s caused the logo to become a lot smaller on some screens also the header text on the desktop is now not centre aligned vertically

Thanks for your help
Sean

[rad]

Hi there,

What text is centered aligned? The CSS doesn’t contain any header text alignment. Checking your home page’s title alignment is set through section’s row.

And it’s only normal for the logo to resize, it’s responsive. The CSS above is just to fix its width on 380px. Would you mind providing the screenshots of the original issue without the above CSS?

Thanks!