How can I adjust my logo's position with CSS coding?

Technical Q&A
,

Topic summary

A user wants to adjust their logo so the descender of the letter ‘g’ extends below the header’s bottom border, allowing proper vertical centering.

Solutions Provided:

Two community members offered CSS-based approaches:

  • ThePrimeWeb suggested adding custom CSS to the Theme Customizer that:

    • Sets overflow: visible on the header container
    • Adjusts height and padding for desktop (55px height) and mobile (35px height) views
    • Includes additional code to prevent logo cutoff when the Shop menu is open, using position: relative and z-index: 2

  • PageFly-Oliver recommended editing the theme.liquid file directly by:

    • Navigating to Online Store → Theme → Edit code
    • Pasting CSS markup at the bottom of the file

Both solutions involve modifying CSS properties to allow the logo to overflow its container. The discussion includes code snippets and screenshots demonstrating the desired outcome and potential issues.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hello!

I’m looking to drop the tail of the letter ‘g’ in my logo below the bottom border of the header. (That way, it’ll be correctly centered in the header. See below for what I’m trying to achieve.) I’m assuming this will take some CSS?

Screen Shot 2024-01-19 at 7.00.16 PM.png
Screen Shot 2024-01-19 at 7.00.16 PM.png450×200 6.89 KB

Website link: https://lselhwvjcf3x4ij0-60502671460.shopifypreview.com

Thanks in advance!

Julia

2

Hey @designbyjrs ,

You can add this to the Custom CSS in the Theme Customizer → Settings ,

div#headerContainer > div.py-2{
    overflow: visible !important;
}

div#headerContainer > div.py-2 > div.flex{
    height: 55px;
    padding-top: 5px;
}

@media only screen and (max-width: 768px) {
    div#headerContainer > div.py-2 > div.flex{
        height: 35px;
        padding-top: 5px;
    }
}

One more thing I noticed is that when the Shop menu is open, the logo get’s cut off.

ThePrimeWeb_0-1705741753988.png
ThePrimeWeb_0-1705741753988.png878×556 21.5 KB

If you want to prevent that, add this additional CSS

.site-header__logo-link {
    position: relative;
    z-index: 2;
}

And it’ll look like this,

ThePrimeWeb_1-1705741801350.png
ThePrimeWeb_1-1705741801350.png885×560 22.5 KB

So as a whole, the CSS would be,

div#headerContainer > div.py-2{
    overflow: visible !important;
}

div#headerContainer > div.py-2 > div.flex{
    height: 55px;
    padding-top: 5px;
}

.site-header__logo-link {
    position: relative;
    z-index: 2;
}

@media only screen and (max-width: 768px) {
    div#headerContainer > div.py-2 > div.flex{
        height: 35px;
        padding-top: 5px;
    }
}
3

Hi @,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly