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

[milkymotorsport]

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/

 

[Abdosamer]

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

[laddisahsi]

Hi @milkymotorsport 

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

[Dan-From-Ryviu · 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>

[milkymotorsport]

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

 

[Dan-From-Ryviu]

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>

[milkymotorsport]

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

https://milkymotorsports.com/

[Dan-From-Ryviu]

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

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