A Shopify store owner using the Brooklyn theme is experiencing mobile header layout issues. On desktop, the header displays correctly with black icons, language selector, shipping discount, and categories all aligned. On mobile, three of four icons disappear, the language selector overlaps the shipping announcement, and categories are hidden.
Requested fixes:
Move language selector to top right corner (smaller size) to avoid conflict with shipping message
Shift logo left to display all four black icons
Solutions provided:
A CSS snippet was shared to adjust the language selector width on mobile screens (max-width: 749px), which initially had a typo but was corrected and confirmed working.
For the missing icons: The icons are part of the navigation code and hidden on mobile by default. Displaying them requires moving icon code outside the navigation section in the header file—a more complex HTML/Liquid modification. One contributor offered to work on a theme copy as a collaborator to implement these changes.
Another user noted that mobile space limitations typically require integrating elements into a left menu, as small icons could harm user experience through accidental taps. The issue remains partially resolved, with code editing in progress.
Summarized with AI on November 2.
AI used: claude-sonnet-4-5-20250929.
3 of the 4 icons disappear, the language selector is on top of the shipping announcement and the categories disappear as well.
Is there a way to:
1 - Put the language selector on the top right corner (smaller), so that it doesn’t conflict with the shipping message?
2 - Put maybe the logo more to the left? To see if at least the 4 black icons would appear corretly.
(If it’s possible to make the categories appear as well with the icons perfect, but the 4 icons would be good)
@buywithmimi - the 4 icons are part of navigation and it is hidden on mobile screen, hence those are not visible, if you want them to show up then some code editing is needed
I’ve tried changing the width to 40px, 30px, 20px… it has always the same size…
About the icons, any suggestion of code editing for the 3 icons to appear? If I put the phone on the side, the 4 icons appear, but with the normal mobile appearance it does only show 1 icon.
@buywithmimi we need to move the icons code outside of the navigation code in header file and put it in correct places , so it appears correctly on small screens, this will need coding+html changes, logo will be pushed to left.
@buywithmimi can you accept me as collaborator? I can check code and let you know the details, I will need theme rights, I will create theme copy and work on it to show you. If ok, then you can send collab code on email below
On mobile, the horizontal space is limited, so everything has been integrated into the left menu. It would be difficult to place it outside the menu because the icons would be too small, making them hard to identify and easy to accidentally tap. This could lead to confusion and negatively impact the user experience.
