Shopify Brookly theme - Header size issue

Hello :slightly_smiling_face:

Store: www.saufhome.com

I have my store configured with the Brooklyn theme, and I’m having some issues on my Header, in the mobile version.

In the computer version:

It’s all perfectly aligned, between the Black icons, the language selector, the shipping discount and the categories.

On the mobile version:

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)

Thanks for everybody help :slightly_smiling_face:

1 Like

@buywithmimi please add this css to the very end of your timber.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → timber.css

@media screen and (max-width:749px){
.uplinkly-language-translate-popup-button{text-align: right; width: 60px;}
}

@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

It didn’t work.

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.

Worked now, I think you forgot the F32 part in the element name :slightly_smiling_face:

any tip for the icons?

@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.

I understand some parts but that’s a bit tricky x)
Can you give some coding hints?

@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

Perfect, thank you for your help.
Sent the email.

@buywithmimi - request sent

HI @buywithmimi

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.

I hope this helps

Best,

Daisy

Did you get the answer you need? I am having the same issue

@DarylMaguire95 we edited the code to solve this issue