My navigation icon on mobile interferes with the cart icon when clicking

Screenshot 2024-04-21 at 10.22.19 PM.png

So I have an issue on mobile when you try clicking the cart button in the header, it is hard at times to open it and when you click the cart icon it sometimes opens up the the Mega Menu/Navigation icon.

I think i’ve figured out the issue which is that the Navigation selector is wide as shown in the image above but I’m having trouble figuring out how to decrease it’s width without changing the height or the width of the actual icon and without ruining the alignment of all the header icons.

really hoping that it is possible to have this fixed as i plan to open my store back up very soon.

Thank you in advance ! :grinning_face_with_smiling_eyes:

backtoreality.co

pass - iambtrr

Hi @kaiyaa !

thanks for your reply, but unfortunately didn’t work :confused:

This is Noah from PageFly - Shopify Page Builder App

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag


Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

will try that now !

Thanks Noah

hey Noah , this actually did work but theres a slight issue, when you load into the store you can see the icons shift to the left a bit, and also when you visit a different page aside from the homepage you can also see the icons move to the left which kind of makes it look as if the website is glitched in the customers view

Hi @Changedmyus0rn3 I have check and see element, you can see image below. system set " width: 5.5rem !important;" ,so it cannot be changed and is defective. Do you remember the location of this css? If you find it, you need to change 5.5rem to 39px. This issue will be completely fixed.

1 Like

Hi @PageFly-Noah awesome i really appreciate you looking into this !

Yeah found exactly where the code was , in the store page custom css

haha so again this kind of did the trick, now on mobile when you click the cart icon, the navigation does not interfear , but there is another slight issue, when you refresh and load onto any page you can see the vavigation icon move fromit’s original position and shift to the right.

same issue as before when all the icons would shift but now it is only the navigation icon , i’ll upload images so you understand what i mean if my wording wasn’t clear enough haha.

I appreciate your help !

How it looks when loading into page :multiply: How it looks after page loads :check_mark: . Width changed to 39px

Hi @PageFly-Noah

I just looked over the first code you provided and actually discovered that it has been placed above the instead of the and now everything looks perfect !

Thank you so much for your help we truly appreciate it !

CEO - Abdelrahman

Take care

@Changedmyus0rn3 Wow great, You good, Thank you. Have a nice day !

1 Like

hey @PageFly-Noah sorry to bother you , i just looked on my website right now and the navigation icon has randomly disappeared

could this have possibly happened because of the code ?

@Changedmyus0rn3 I’am sorry for delay, I checked again the other day and it was displayed. I’m sorry about that. Can you resend your website url? Currently, I went to the old url link but can’t see your website.

1 Like

hey Noah not a problem i totally understand :grinning_face:

I actually found out that i made a duplicate which was a life saver haha , it looks all okay now !

i have a small issue if you wouldn’t mind helping @PageFly-Noah !

So i am using a new phone, iphone 12 mini and when you view the shop all navigation , the product images look shrunken do you know any possible fix for this ? would really appreciate your input :grinning_face:

backtoreality.co

pass - iambtrr

Hi @Changedmyus0rn3 You can give me url show this product in your image. Because i dont use iphone 12 but I dont sure it have show in other device. thank you.