Shopify themes, liquid, logos, and UX
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 ! 😄
pass - iambtrr
Solved! Go to the solution
This is an accepted solution.
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 </head>
<style>
@media screen and (max-width: 767px){
.Header__FlexItem:nth-child(1) .Header__Icon{
width: 39px !important;
margin-left: 16px !important;
}
}
</style>
Hope my solution will help you resolve the issue.
Best regards,
Noah | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
This is an accepted solution.
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.
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
This is an accepted solution.
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 </head>
<style>
@media screen and (max-width: 767px){
.Header__FlexItem:nth-child(1) .Header__Icon{
width: 39px !important;
margin-left: 16px !important;
}
}
</style>
Hope my solution will help you resolve the issue.
Best regards,
Noah | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
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
This is an accepted solution.
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.
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
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✖️ How it looks after page loads ✔️. Width changed to 39px
I just looked over the first code you provided and actually discovered that it has been placed above the <body> instead of the <head> 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 !
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
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.
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
hey Noah not a problem i totally understand 😀
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 😀
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.
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025