How can I edit code to adjust mobile display for Menu Sticky Bar Chart icon?

Hi guys, can you please help me, how do I edit the code? What coding should I change to make the mobile display like this? so that it doesn’t overlap with the WhatsApp button icon.

from this :

to this :

I want the sticky bar menu when opened on the cellphone to be just a small box so it’s positioned more to the left, and the position to the right of the WhatsApp button

what coding should I add?

Please add this code to do that

.btn.site-nav__thumb-button {
width: calc(100% - 100px);
}

Can the box container size of the sticky bar and chart icon be shortened so it’s not too long?

Hi @megawdyaaaa ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save


Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly