Remove white space between top of page and menu items

Topic summary

Issue: Reduce the white space above the header so the menu aligns with icons on the right on a Shopify store (URL provided). The user also wants the header text centered.

Key constraint: The white space (logo area) and the menu are separate sections in the theme. Using only CSS (Cascading Style Sheets: styling rules) to move the menu into that space isn’t reliable across devices and may cause overlap or the menu wrapping to a second line on small screens.

Updates: The user added dropdown-related code, after which the menu shifted downward. They’re unsure what was changed and asked for a fix to improve visibility on small devices.

Guidance: To achieve the desired alignment, the menu section must be moved into the logo/header area via theme code edits (as illustrated in the third screenshot). Simply centering via CSS is not considered feasible; keeping the current structure is suggested to avoid responsive issues.

Attachments: Multiple screenshots are central to understanding the layout differences.

Outcome/Status: No specific code solution was provided. The discussion remains open, with the next step being custom theme code modifications to reposition the menu within the header area.

Summarized with AI on December 19. AI used: gpt-5.

Do you happen to know the code to solve the problem where it might be poorly visible for small devices?
I can add the code and see what it’ll look like! :slightly_smiling_face: