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! ![]()
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.