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

[megawdyaaaa]

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?

[Dan-From-Ryviu]

Please add this code to do that 

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

[megawdyaaaa]

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

[PageFly-Oliver · Accepted solution]

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

<style>
@media(max-width:767px){
.btn.site-nav__thumb-button{
  width: 85% !important;
}
}

</style>

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly