How to align and change menu icon, and move the two icons farther to the edge of the screen?

How to align and change menu icon, and move the two icons farther to the edge of the screen?

merchabellire
Tourist
19 0 1

merchabellire_0-1703626936634.png

Website: abellire.shop 

Password: abellire2023

Icon I'd like to use: Remix Icon - Open source icon library

 

I would like to change the hamburger menu icon to the link provided but make it align with the shopping bag icon in terms of level height. I'd also like to move both icons equally a bit to the edge. Any help is greatly appreciated.

Reply 1 (1)

PageFly-Richard
Shopify Partner
4668 1069 1726

Hi @merchabellire 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media screen and (max-width: 767px){
header.header{
padding-left: 10px !important;
    padding-right: 0px !important; 
}
}
</style>

PageFlyRichard_0-1703637321755.png

About to change the hamburger icon, you have to download the icon as svg format first 

> Then you can click and open the svg file > right click on the svg and copy all the code here 

PageFlyRichard_1-1703637410294.png

After that go to theme edit code > search for icon-hamburger.liquid and replace the code with the one you copied

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.