[Support request] How to set the logo to extend beyond the bottom of the header?

[Radek]

Hi, what is best way to make this simple header with GP ? I mean a logo that goes beyond the bottom of the header like at this page https://www.pivovar-liban.cz (made with Wix, so inspecting was unuseable for me). If I put site logo, header automaticly increase its height. So it requires “Use Navigation as Header” toggle on and then play with image size and negative margin ? Thanx a lot.

[David]

Hi there,

if you’re using the Navigation as Header then try this CSS:

@media(min-width: 769px) {
    .navigation-branding img {
        position: absolute;
        top: 0;
        height: 90px;
    }
}

[Radek]

Thanx David, and solution for non Navigation as Header use ?

[David]

Try this:

@media(min-width: 769px) {
    .site-header .site-logo img {
        position: absolute;
        top: 20px;
        width: 170px;
    }
}

[Radek]

Excelent, so if img is set to absolute position, its stop kidding to header height, did not know that. Thanx a lot.

[David]

I targeted the img as that is where the GP assigns the width property. 🙂

Glad to be of help

[Author]

Posts