How to change Cart icon and Menu icon to "cart" and Shop" ONLY on mobile

[Maiselnielsen]

Hi, 

Can you help me? 

I need to change the card icon and the menu icon to the text "Cart" and "Shop" ONLY on mobile. I want to keep the icons in the desktop version and instead have text on the mobile version. 

I have the dawn theme. 

Thank you in advance. 🙂 

www.linierelingerie.com

xef84eju

[Roy-ロイ]

Hi @Maiselnielsen , 
Just to confirm, is this how you would want it to be? 

We can do this through CSS.

To get started, follow these steps:

1. Log in to your Shopify Admin panel.
2. Go to Online Store > Themes > Customize.
3. In the Customizer, navigate to the Theme settings and add the below code in the Custom CSS field. 
   
   

@media screen and (max-width: 749px) { 
    a#cart-icon-bubble::after {
        content: 'Cart';
    }
    a#cart-icon-bubble svg {
        display: none;
    }

    summary.header__icon.header__icon--menu span::after {
        content: 'Menu';
    }

    summary.header__icon.header__icon--menu svg {
        display: none;
    }
}​

[Maiselnielsen]

Hi, 

That sounds good! 🙂 

I was thinking about something like this where the monogram stands out in the middle. See attached. 

In terms of the search field can it be placed next to the "card" description in the same size as the text? 

Thank you so much in advance! 

[Roy-ロイ]

I love where this is going. 🙌

Regarding your request, absolutely, I can make it happen! However, I would suggest that instead of using CSS to move things around, we should use HTML to structure the layout. This will make it more semantic and easier to maintain in the long run.

What do you think? Does that sound like a good approach to you? Let me know.

[Maiselnielsen]

Hi, 

I am open to try ! Let me know what to do. 🙂 

[BSSCommerce-B2B]

Hi @Maiselnielsen, to change the cart icon and menu icon to text on mobile while ensuring everything still works well, follow these steps:

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file base.css.
Step 3. Add this code at the end of file

@media only screen and (max-width: 990px) {
	header-drawer details svg {
		visibility: hidden !important;
	}
	header-drawer::after {
		content: "Shop";
		position: absolute;
		top: 35px;
		left: 37px;
		z-index: 0;
		pointer-events: none;
	}
	a#cart-icon-bubble::after {
		content: "Cart";
	}
	a#cart-icon-bubble svg {
		display: none;
	}
}

Result:

If it helps you, please like and mark it as the solution.

Best Regards