How to hide the menu button in favor of a custom close icon on desktop?

Store Design
,
1

I have coding to have the hamburger enabled on desktop. I have a custom .svg to have my menu text saying “menu” rather than the hamburger icon. I am running into something I cant figure out or find other forums with something similar. When I click the menu button, the close “X” shows on top (or under) the menu svg. Is there a way where the menu button hides and allows only the X to show, OR, a way where the menu button still hides, but I can upload another custom .svg that says close..? The link to my website is ysamani.com Thanks for all help and guidance. Really love how helpful the Shopify community is.

2

Hello @ddai

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you.

  1. Go to Online Store → Theme → Edit code.

  2. Open your assets/base.css

  3. Paste add the code at the end of this file:

.menu-opening > summary > span > svg[standalone="no"]{
       display: none !important;
    }

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

3

Thank you ! This worked.