What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: dawn theme | replace hamburger icon

Solved

How can I replace the hamburger icon in my Dawn theme?

milkymotorsport
Explorer
97 0 15

My site is:

https://milkymotorsports.com/

Can someone pls provide code to replace my hamburger menu icon? I'd like to use the menu icon on https://pipemasters.vans.com/

Screenshot 2023-11-13 at 9.59.46 PM.png

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
10296 2043 2114

This is an accepted solution.

Go to your Online store > Themes > Edit code > open icon-hamburger.liquid file, replace code in this file with this code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path fill="#fff" d="M0 9.6h4.8v4.8H0zM9.6 9.6h4.8v4.8H9.6zM0 19.2h4.8V24H0zM9.6 19.2h4.8V24H9.6zM0 0h4.8v4.8H0zM9.6 0h4.8v4.8H9.6zM19.2 0H24v4.8h-4.8zM19.2 9.6H24v4.8h-4.8zM19.2 19.2H24V24h-4.8zM14.4 14.4h4.8v4.8h-4.8zM14.4 4.8h4.8v4.8h-4.8zM4.8 14.4h4.8v4.8H4.8zM4.8 4.8h4.8v4.8H4.8z"/>
</svg>

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 7 (7)

Abdosamer
Shopify Partner
942 172 197

@milkymotorsport , I need access to theme code to implement this, feel free to contact me.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work

laddisahsi
Shopify Partner
385 38 41

Hi @milkymotorsport 

This can be done using the custom code, Please share collab access

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!

Dan-From-Ryviu
Shopify Partner
10296 2043 2114

This is an accepted solution.

Go to your Online store > Themes > Edit code > open icon-hamburger.liquid file, replace code in this file with this code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path fill="#fff" d="M0 9.6h4.8v4.8H0zM9.6 9.6h4.8v4.8H9.6zM0 19.2h4.8V24H0zM9.6 19.2h4.8V24H9.6zM0 0h4.8v4.8H0zM9.6 0h4.8v4.8H9.6zM19.2 0H24v4.8h-4.8zM19.2 9.6H24v4.8h-4.8zM19.2 19.2H24V24h-4.8zM14.4 14.4h4.8v4.8h-4.8zM14.4 4.8h4.8v4.8h-4.8zM4.8 14.4h4.8v4.8H4.8zM4.8 4.8h4.8v4.8H4.8z"/>
</svg>

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

milkymotorsport
Explorer
97 0 15

@Dan-From-Ryviu thank you! Can you also do the code for this?

checkerboard-pattern-4x4.png

Dan-From-Ryviu
Shopify Partner
10296 2043 2114

Hi @milkymotorsport, please replace existing code in icon-hamburger.liquid with this one

 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 260 260" width="24" height="24">
	<title>checkerboard-pattern-4x4</title>
	<defs>
		<image width="260" height="260" id="img1" href="data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQQAAAEECAMAAAD51ro4AAAAAXNSR0IB2cksfwAAAKVQTFRF////7+/vExMTAAAABQUFAQEBERER7Ozs/f39/v7+7u7u8PDw8fHx8vLy8/Pz5OTkJCQkBgYGDQ0NDw8PDg4ODAwMHh4e4eHh4+PjISEhCgoKCQkJCAgIGhoa5+fn9/f39fX19vb24ODgHx8fAwMDFxcXFRUV6+vrEBAQAgICFBQU6urq+vr6HR0d4uLiGBgYFhYW6enp+fn5IiIi3NzcGxsb3d3dBIBNLwAAAxxJREFUeJzt3UtTGkEUgNGZQQZ5iImgEtAAYlTiI0/z/39awIpVMiy0uQsxnm+tdtehZxZU9TXLguVFbacWqF42diPrNxc7qD9pkz1EDSBAgAABAgQIECBAgAABAgQIbwthN2uVkfUhQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECNuHkC9qb1Sns7fX7e5/+HjQe1I/scOj471OoLw1+JS6ZrVsOByORiebNVp0+nk8GT9pmtrZ7OHvbNrw/Mt+8pqVsn+HcqOWv3lxma0c52ZiWX614eqPXTRiD/Si+aINV3/g+9rJmqENNIraPFC91rvcDZZFXypFOwu92Jp5udHlrcfOa2Ur9CEsgwABwlYhrL1tIUCAAAECBAgQlrWLeWR9CBAgQIAAAQIECBAgQIAAAcL7Q3j8UgUCBAgQIECAAAECBAgQIECAAOHF+VIFAgQIECBAgAABAgQIECBAeHMI9UopG1j+fP/6JnZhvFXEbs2fl9epN/XXbu5fVeq9vH7/4ODg9GySr46WWO25URTjwe0wYc21yuFsEBlCsSzrVtp7cd3uZDKd7s9GveGTDisNn2l0Oxi/fM318vHdUXXN1MKPU6uorxzntfkGz1Qrgo90s/Mt9DgtCiO0r1bncCS/2croIIxOkbxmJQgQ/huE9usPm4KwBQjNZn4FAQIECBAgbCFCp6yFhkVBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBUEaqzBFL/WX3+PWZQu/ixtoeUfmaN1z8Jee98p3pTPqV6cRkaQnHT7MYRqvMIUgcw3M36kRkQvcNfv7t5oO74eBbawKIsdehDtfuzaT6NNLgfRTrZOf0TnqRRr5R6lMpWcLBM9L02j06hyGKDZSBAgAABAgQIECBAeCcIsR1AgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgLDFCKEhEBC2BOEv8LB2d9Srh3AAAAAASUVORK5CYII="/>
	</defs>
	<style>
	</style>
	<use id="Background" href="#img1" x="0" y="0"/>
</svg>

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

milkymotorsport
Explorer
97 0 15

@Dan-From-Ryviu can you provide code to make the icon 1.5x bigger on mobile?

https://milkymotorsports.com/

Dan-From-Ryviu
Shopify Partner
10296 2043 2114

Please add this CSS code at the bottom of your CSS file 

.header__icon--menu .icon {
height: 36px !important;
width: 36px !important;
}

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.