Whitespace in header

Technical Q&A

Topic summary

Issue: Excess whitespace in the Shopify store header between the search bar and categories; requester also wants the overall header (e.g., search bar) smaller.

Key steps and attempts:

  • Store URL provided (pool-care.be) to enable targeted advice.
  • Initial CSS from one responder adjusted menu item padding and line-height. Result: arrows overlapped category labels in the navigation, creating a new layout issue.
  • Follow-up solution proposed editing theme CSS (Online Store > Themes > Assets > main.css or equivalent) with:
    • 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; }
    A screenshot shows a tighter header and reduced spacing.

Notes:

  • Images/screen captures are central to verify the before/after results.
  • The overlap of arrows appears addressed by the second approach, though not explicitly confirmed by the requester.
  • Request to shrink elements like the search bar remains unanswered; further CSS tweaks may be needed.

Status: Partially resolved; discussion likely open for refinements.

Summarized with AI on December 21. AI used: gpt-5.
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