Solved

Logo padding! Coding help needed

designbyjrs
Shopify Partner
4 0 0

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

 

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

 

Thanks in advance!

Julia

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
1143 297 224

This is an accepted solution.

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

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


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;
    }
}

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com

View solution in original post

Replies 2 (2)

ThePrimeWeb
Shopify Partner
1143 297 224

This is an accepted solution.

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

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


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;
    }
}

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com

PageFly-Oliver
Globetrotter
717 142 134

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

 

<style>
div#headerContainer > div{
    overflow: visible !important;
}

div#headerContainer > div> .flex{
    height: 50px;
    padding-top: 10px;
}

@media only screen and (max-width: 768px) {
    div#headerContainer > div > .flex{
        height: 40px;
        padding-top: 5px;
    }
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.