Reduce space in header, the space between the top bar and the serach bar.

I’ve been studying the forum for hours. There are lots of solutions to reduce spaces in different areas. However it seems like none works for the space between the top bar and the search bar.

I’ll keep on trying, but if somebody has an advice he’ll be blessed.

Hi there,

To reduce the white-space shown in your screenshot, you could use the following custom CSS:

@media (min-width: 768px) {
body .site-header {
    padding-top: 0;
  }
}

Thanks @riaanknoetze

Unfortunately no change when using your code.

Hey @boppar

I don’t see the code applied anywhere on your site. Did you remove it again?

Hi @senff @riaanknoetze

I’ve applied the code again. Still not working.

Hi @boppar,

We apologize for taking a while to get back to you. If you’re still having trouble, would you mind sharing a link to your site so that we can take a closer look?

@wpniall
How nice someone bothered to get back. I’ve been waiting for 6 weeks.
See link below:
https://ibb.co/bgvfdXm

Hey @boppar

Please, for all threads you start, always include a direct link to your site, hangmattor.se instead of screenshots. This way, it will help us check your site a lot easier and we don’t have ask you for a link. Thank you.

I see the code in your CSS file, but it’s being overriden on larger screens. Can you turn off the Autoptimize plugin so we can check what might be causing it?

@senff
I’ve turned off Autoptimize.

Hey @boppar

Thank you. It looks like this is because you have missed adding another { earlier. Make sure you add it on line 184:

Image link: https://d.pr/i/ebc8Bt

Thanks.

I still have an issue.
This code do reduce the space between the top bar and header:

@media (min-width: 768px) {
body .site-header {
    padding-top: 0;
  }
}

I would like just a little space. Changing the value of padding-top doesn’t achieve a small space.
Like this:
https://ibb.co/NZJhWM9

Site: https://ibb.co/7K5MdN6

That was embarrassing simple to solve:

@media (min-width: 768px) {
body .site-header {
    padding-top: 10px;
  }
}

• This reply was modified 3 years, 7 months ago by boppar.

Hi @boppar,

Glad to hear you managed to get the code working ??

If you need additional help with the Storefront theme, please start a new thread and we’ll be able to help you out there. Thanks!