Shopify themes, liquid, logos, and UX
This is driving me insane and I am about ready to throw my computer out of the window.
My header is way too big and nothing so far has worked to fix the problem.
I have included a screenshot just to show the issue (https://freeimage.host/i/header-too-big.VBHrVj). I have blurred my store name, but you can see the header is way too large.
I thought it was an issue with my logo, tried a bunch of sizes but the problem was always the same. Even when I removed the logo and just kept the text name of my store (as in the screenshot), you can see the header is still too big. It should be a thin strip. Not this giant monstrosity.
I do seem to remember a few days ago, there were subheadings within the header, like Home, Catalog, and Contact. I deleted them because I didn't want them. I have a feeling the problem is something to do with this. Even though I removed them, it's as though the header still thinks they are there and is making space for them, even though they are invisible to us. It's just a guess.
Whatever the reason, I desperately need this fixed. I am losing time and money because I can't publish my site until this is rectified. Something this simple should not be this difficult.
I don't know why we are expected to change or fix code. We're not coders. If we were, we'd be creating our own sites. Why can't the process just be simple?
Solved! Go to the solution
This is an accepted solution.
Please add the following CSS code to the assets/theme.css bottom of the file.
@media only screen and (min-width: 750px){
.site-header.logo--center { padding-top: 10px !important;}
.site-nav--centered {padding-bottom: 10px !important;}
.site-nav {margin: 0px 0 !important;}
.announcement-bar__message {padding: 5px 22px !important;}
}
Thanks!
Please share your store URL!
Thanks!
I'll PM you.
Please share your store front password!
Thanks!
Hi
I am not sure how you can say it is normal height. I have added the screen shot below.
It's like 4 times taller than the text name of my store. Way too big.
This is an accepted solution.
Please add the following CSS code to the assets/theme.css bottom of the file.
@media only screen and (min-width: 750px){
.site-header.logo--center { padding-top: 10px !important;}
.site-nav--centered {padding-bottom: 10px !important;}
.site-nav {margin: 0px 0 !important;}
.announcement-bar__message {padding: 5px 22px !important;}
}
Thanks!
Yes, this seemed to correct the problem.
I'm hoping to use the Debut theme again for a couple of future stores I'll be creating soon.
I am hoping this header problem doesn't repeat itself, but I'll be sure to use this code if it does.
Thanks.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024