How can I add descriptions to header icons on my mobile site?

[pwarnhammar]

Hi,

I want to add header icon descriptions to the mobile view on my website. Meaning showing the word “menu” under the hamburger, “cart” under the cart icon and “search” under the searchglass.

I am running my shop on the impulse theme - and would like to get some insights!

[Prezentech]

Hi There,

Thank you for reaching out to the Shopify forums!

Let me quickly fix that issue for you.

Please share your store URL here and allow me to check for you.

Thanks & Regards,
Prezen Tech

[pwarnhammar]

Hi!

thanks cocktailored.se

[Prezentech]

Hi

Please check the attached screenshot.

[pwarnhammar]

Okay I know how my website looks

[Prezentech]

Did you want to add Menu word under the hamburger like the previous one screenshot?

[pwarnhammar]

Yes basically like this;

[Prezentech]

Hi

Yes, we can do that in your store.

Please apply below CSS then, it will look like this attached screenshot.

Go to the Online Store > Click on edit theme > Find the theme.css and add below code in the last line then, save the file.

@media only screen and (max-width:768px){
span.icon__fallback-text {
    display: block;
    font-size: 10px;
    width: auto;
    height: auto;
    position: relative;
}
}

That’s it!

[pwarnhammar]

It almost worked, unfortunately it messet up with other names

[Prezentech]

Hi @pwarnhammar

There are two things which you need to check

1. Currently, it showing Site Navigation so instead of that we need to use Menu but for that we need to change that text from the file

2. When I checked your site on mobile, I feel there is one issue that has more space on the right side of the screen. I have attached screenshot for you.

Please add the below CSS so, it fixed the massup issue with top header:

@media only screen and (max-width: 768px) {
header.site-header .page-width {
    padding-top: 10px;
}
}

[pwarnhammar]

It basically worked, thank you, however a really strange thing ended up at my product photos

[Prezentech]

On which page are you getting the issue?

[Prezentech]

On which page you are checking?

[pwarnhammar]

On all PDPs

[Prezentech]

Hi,

Can you please add the below CSS and check?

.product-image-main .icon__fallback-text {
    display: none;
}

[pwarnhammar]

That is amazing, it worked!