Solved

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

Changedmyus0rn3
Excursionist
37 0 3

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 ! 😄

backtoreality.co 

pass - iambtrr 

Accepted Solutions (2)

PageFly-Noah
Shopify Partner
1242 217 249

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.

View solution in original post

PageFly-Noah
Shopify Partner
1242 217 249

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.

PageFlyNoah_0-1713772924668.png

 

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.

View solution in original post

Replies 15 (15)

kaiyaa
Explorer
238 18 23

Hello @Changedmyus0rn3 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>



 

<style>
@media (max-widht:768px)
{
#shopify-section-header .Header__Icon
{
max-width: 100px !important;
    width: 100%;
}
.Header__FlexItem.Header__FlexItem--fill {
    margin-left: -20px !important;
}
}
</style>

 


 If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me
Changedmyus0rn3
Excursionist
37 0 3

Hi @kaiyaa ! 

 

thanks for your reply, but unfortunately didn't work 😕

PageFly-Noah
Shopify Partner
1242 217 249

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.

Changedmyus0rn3
Excursionist
37 0 3

will try that now ! 

 Thanks Noah 

 

Changedmyus0rn3
Excursionist
37 0 3

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 

PageFly-Noah
Shopify Partner
1242 217 249

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.

PageFlyNoah_0-1713772924668.png

 

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.

Changedmyus0rn3
Excursionist
37 0 3

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

IMG_4555.jpg IMG_4554.jpg Screenshot 2024-04-16 at 12.47.33 AM.png

Changedmyus0rn3
Excursionist
37 0 3

Hi @PageFly-Noah 

 

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

PageFly-Noah
Shopify Partner
1242 217 249

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

Changedmyus0rn3
Excursionist
37 0 3

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

Changedmyus0rn3
Excursionist
37 0 3

could this have possibly happened because of the code ?

PageFly-Noah
Shopify Partner
1242 217 249

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

Changedmyus0rn3
Excursionist
37 0 3

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 ! 

Changedmyus0rn3
Excursionist
37 0 3

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 

IMG_0055.PNG 

PageFly-Noah
Shopify Partner
1242 217 249

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.