Whitespace in header

[pool-care]

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!

[saim007]

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

[pool-care]

Zwembadwinkel (pool-care.be) 

[Artzen_tech]

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.

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

Let me know if need further assistance
Regards,
Artzen Technologies

[pool-care]

Hi, 

Thank you for your answer!

This happens when I use the code:

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. 

[Made4uo-Ribe · Accepted solution]

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:

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