How can I reduce the size of my large header in Debut theme?

Store Design
1

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?

1 Like
2

@IMeanBusiness

Please share your store URL!

Thanks!

3

I’ll PM you.

4

@IMeanBusiness

Please share your store front password!

Thanks!

5

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.

header too big.png
header too big.png1920×866 99.7 KB

1 Like
6

@IMeanBusiness

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!

1 Like
7

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.