Whitespace in header

Technical Q&A
1

Hi,

I want to make the header smaller. Now there is a lot of white space between the search bar and the categories. Is there any CSS code for this?

Thank you!

1 Like
2

@pool-care Can you please provide store URL so I can check?

3

Zwembadwinkel (pool-care.be)

4

Hi @pool-care

Its Artzen Technologies! We will be happy to help you today.

You can follow the below css which I have mentioned. And check the result.

  1. Go to your Online Store
  2. Edit Code
  3. Find CSS File
  4. Add the following CSS
.header__inline-menu ul.list-menu li header-menu .mega-menu .header__menu-item--top {
    padding: 0px 1.5rem;
    line-height: 30px;
}

This is your desired result.

Artzen_tech_1-1724666433155.png
Artzen_tech_1-1724666433155.png1365×386 126 KB

If my solution helped you, then please mark it as accepted.

Let me know if need further assistance
Regards,
Artzen Technologies

5

Hi,

Thank you for your answer!

This happens when I use the code:

poolcare_0-1724668063531.png
poolcare_0-1724668063531.png1783×336 42 KB

The arrows are on the categories. Can you help with that?

By the way, is there a solution for making everything in the header a bit smaller? Like the search bar etc.

6

Hi @pool-care

Check this one

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

header .header__inner {
        row-gap: 0;
    }
header .header__inline-menu {
        margin-top: 0rem;
    }
sticky-header.header-wrapper {
    border-bottom: .1rem solid rgba(var(--color-foreground), .08);
}
.header-wrapper--border-bottom .header, .header {
    border-bottom: 0;
}

And save.

Result:

Made4uoRibe_0-1724706991506.png
Made4uoRibe_0-1724706991506.png1850×308 195 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like