How To Change Hamburger Menu Icon On Mobile In Shopify

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ส.ค. 2024
  • I will show you how to change hamburger header menu icon on mobile in Shopify and set it to any icon of your preference to be the header menu icon for mobile.
    The Shopify header menu icon commonly known as the "hamburger menu" is a small icon consisting of three horizontal lines and It is typically placed at the top of the screen and serves as a gateway to the website's navigation menu but however many Shopify store owners fail to realize the importance of changing this menu icon to enhance user experience.
    First, changing the header menu icon on mobile in Shopify can help improve the overall aesthetics of your store and the default hamburger menu icon may look generic and unappealing, which can give a negative impression to your visitors so by customizing it to match your Shopify store brand's identity you can create a more visually appealing and cohesive design that resonates with your target audience.
    Tool : editsvgcode.com
    If you have any questions or suggestions my Instagram : / anas_elmedlaoui
    About me:
    My name is Anas El Medlaoui and i have been around digitally for 9 years making Websites, Mobile Applications, Social Media Promotions, E-commerce etc...
    And i have accumulated some experience in multiple fields over the years jumping from project to project (Which wasn't a good idea), I started this TH-cam channel after a year of hesitation to share my knowledge and experience with people that are willing to succeed online with the theory of knowledge for everyone.
    #shopify #menu #icon

ความคิดเห็น • 32

  • @japsimer
    @japsimer 2 หลายเดือนก่อน

    what a wonderful video, helped a lot this is crazy how you help us out with so many codes that too for free. god bless you man massive love from india🙏🙏🙏🙏❤❤❤❤

    • @OnHOWGuy
      @OnHOWGuy  2 หลายเดือนก่อน

      Thank you legend and im really glad i did help, no worries tons of videos on the way which means more code to share haha.
      Ameen and much respect to indian people.
      Cheers

  • @Truth_Spoken
    @Truth_Spoken 2 หลายเดือนก่อน

    Thanks, worked perfectly.

    • @OnHOWGuy
      @OnHOWGuy  2 หลายเดือนก่อน

      Really glad it did and you're welcome

  • @BrandiBrandi-xr4oc
    @BrandiBrandi-xr4oc 2 หลายเดือนก่อน

    sir your vedios very helpfull thankss...plzz make one vedio about circle slider collection..

    • @OnHOWGuy
      @OnHOWGuy  2 หลายเดือนก่อน

      You're very welcome and glad they were.
      I just noted your request now, i will work on it.
      Cheers

  • @jonathanwebster9000
    @jonathanwebster9000 2 หลายเดือนก่อน

    Hey Anas, Great Content!! How do I add sidebar menu as a drop-down menu on my pages, through liquid. Thanks!

    • @OnHOWGuy
      @OnHOWGuy  2 หลายเดือนก่อน

      Hey, Thank you and i appreciate that.
      Can you provide more info on this, i replied to your previous comment.
      Cheers

  • @theogacc
    @theogacc หลายเดือนก่อน

    Bro I lover your videos you‘re helping me so much!
    But I really need your help:
    I changed the hamburger icon and it worked perfectly. But if I press further down it still opens. So the hamburger icon has a „hidden bar“ down to the middle of the page. I just want it to be where it should be but I don‘t now what to change. Also this is only on mobile because obviously on desktop you don‘t have the hamburger icon. Please help me bro! Big love

    • @theogacc
      @theogacc หลายเดือนก่อน

      same thing happens now as I changed the cart icon I don‘t know what to do

    • @theogacc
      @theogacc หลายเดือนก่อน

      nevermind bro I figured it out

    • @OnHOWGuy
      @OnHOWGuy  หลายเดือนก่อน +1

      Thank you and glad they were helpful.
      Good to know you fixed it

  • @RafayPicx
    @RafayPicx 2 หลายเดือนก่อน

    thanks sir. will you please make a video on how to make additional tabs for different products like headphones tab or speakers so customer make prodcts easily to find

    • @OnHOWGuy
      @OnHOWGuy  2 หลายเดือนก่อน

      You're very welcome, you mean for the description of the product ? sorry i misunderstood your request but can you elaborate more on the question ?
      Let me know in a new comment as its difficult now for me to see replies.
      Cheers

  • @japsimer
    @japsimer 2 หลายเดือนก่อน

    can you make dropdown description for multicolumn in dawn theme ?

    • @OnHOWGuy
      @OnHOWGuy  2 หลายเดือนก่อน

      You mean the cards in multicolumn will be as dropdown ?
      Can you please elaborate more on the request ! thanks.
      Let me know in a new comment its hard to see the replies now.
      Cheers

  • @beham1016
    @beham1016 หลายเดือนก่อน

    Hi there anas yopu showed the hamburger Icon but what about the "X" button when you click on the hamburger icon to see the dropdown menu?

    • @OnHOWGuy
      @OnHOWGuy  หลายเดือนก่อน +1

      Hey, Ohh thats a good question, if you want to change that use the same trick in this video but for icon-close.liquid file instead.
      I will make a video about this for other people who have the same question, because i know questions keep repeating.
      Cheers

  • @ropio.stores
    @ropio.stores หลายเดือนก่อน

    how to customize "add to cart" and "buy it now" add effects to it? like jumping and shaking

    • @OnHOWGuy
      @OnHOWGuy  หลายเดือนก่อน

      I just noted your request and i will work on it.
      Cheers

  • @faizaanqureshi785
    @faizaanqureshi785 2 หลายเดือนก่อน

    sir plzz help me
    specific color variant show
    please make a video on this

    • @OnHOWGuy
      @OnHOWGuy  2 หลายเดือนก่อน

      Can you elaborate more on the request please ? Is it to show the variant picture when the visitor clicks on the variant color ?
      If thats the case, the option has been added to Dawn lately.
      Cheers

  • @ShopRetroGrade
    @ShopRetroGrade 2 หลายเดือนก่อน

    this doesn't fully work as when you go to press the menu button the x is on top of this icon, however you can fix this by pasting the *

    • @ShopRetroGrade
      @ShopRetroGrade 2 หลายเดือนก่อน

      actually it may fully work i havent updated to dawn 15.0 yet

    • @OnHOWGuy
      @OnHOWGuy  2 หลายเดือนก่อน

      I works just fine and i had to recheck after your comment.

    • @OnHOWGuy
      @OnHOWGuy  2 หลายเดือนก่อน

      yes

    • @Buzzzyx21
      @Buzzzyx21 3 วันที่ผ่านมา

      can you please simplify that, for me it just erase X

  • @beham1016
    @beham1016 หลายเดือนก่อน

    Hi Anas I tried to change also the icon-close.liquid to change the X button but it didn’t work they showed me two icons in the same place at the same time

    • @OnHOWGuy
      @OnHOWGuy  หลายเดือนก่อน +1

      Ohh i see, then it must have two files then thats why there is that conflict.
      Im afraid you might have to wait because i already noted your request that day and now i will work on it and see whats going on.
      Cheers

    • @beham1016
      @beham1016 หลายเดือนก่อน

      @@OnHOWGuy Thanks a lot Anas

    • @OnHOWGuy
      @OnHOWGuy  หลายเดือนก่อน +2

      Hey, i have an update for you, i just checked and i figure it out.
      Don't change the whole code, Keep the info above like "xmlns=,aria-hidden=focusable=, and so on" change only the code after

    • @beham1016
      @beham1016 หลายเดือนก่อน

      ​@@OnHOWGuy Thanks a lot Anas