Impulse Theme - manual logo smaller + remove margin/padding in nav menu.

[CaelanB]

Hey everyone!

I’m working on customizing my Shopify store using the Impulse theme, and I need some help with a couple of tweaks. The URL to see the upcoming theme update is https://i2am13tcip15mkcl-68139188523.shopifypreview.com (I can give an updated URL if need be.)

1. Logo Size: I want to manually make the logo smaller. Desktop logo can only go down to 100px on the settings slider, but I want it to be 60px (or 50px if I choose it later, same for mobile logo) so it can match the mobile logo size.

2. Navigation Menu Margins/Padding: The nav menu has some extra margin/padding that I’d like to remove to give it a cleaner look so there's more room to view the web page; unsure if this is padding or margin or both that I wish to remove.

Additionally, I do not wish to edit the Liquid code because, to my understanding, doing so would prevent me from updating my paid theme automatically in the future... correct? Any tips or code snippets that avoid manual Liquid edits would be super appreciated!

Current Custom CSS code is as follows and unsure if such padding is needed here to fix the navigation, so I'm willing to remove it from ".page-width" code snipping if it should be in a more appropriate section:

.page-width {
  padding-left: 10;
  padding-right: 10;
  padding-top: 10;
  padding-bottom: 5;
  max-width: 1800px;
}

Thanks in advance! 🙂

[GTLOfficial]

Hello @CaelanB 

Go to online store ----> themes ----> actions ----> edit code ---->assets ---->site-header.css
add this code at the end of the file.

@media only screen and (min-width: 769px) {
.site-header__logo a {
width: 60px;
}
}
.header-sticky-wrapper {
height: 121px !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App

Hi @CaelanB  Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>

@media screen and (min-width: 768px){
.site-header__logo{
margin: 0px !important;
}
.site-header__logo-link{
padding-top: 60px !important;
}
.site-header__logo-link img{
height: 60px !important;
}
}
</style>

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly

[CaelanB]

Can either of these options go in "Custom CSS" section instead? Because I do not want to 'Edit Code" menu if it means I can no longer get my paid theme automatically updated in the themes section of admin settings.