The icon I added to my menu appears on desktop but not on mobile?

[erhan2]

Hello, I added a special icon to the menu on my website. I can see this on the desktop, but when I switch to the mobile side, I cannot see the icon? What could be the reason? I will share the code I added to base.css below. I will be very happy if you help me! I've been dealing with this for a day and couldn't find a solution.

My Website: https://www.vintagetypeshop.com/

MY Base.css Code:

.header__menu-item[href="/collections/typewriter"] {
position: relative;
display: flex;
align-items: center; 
}

.header__menu-item[href="/collections/typewriter"]::after {
content: '';
width: 24px;
height: 24px;
background-image: url('https://cdn.shopify.com/s/files/1/0697/5864/8603/files/writer.png?v=1736370118'); 
background-size: contain;
background-repeat: no-repeat;
margin-left: 8px; 
display: inline-block;
}

@media (max-width: 768px) {
.header__menu-item[href="/collections/typewriter"] {
justify-content: flex-start; 
padding-right: 30px; 
}

.header__menu-item[href="/collections/typewriter"]::after {
width: 20px;
height: 20px;
background-image: url('https://cdn.shopify.com/s/files/1/0697/5864/8603/files/writer.png?v=1736370118');
background-size: contain;
background-repeat: no-repeat;
margin-left: 8px;
}
}

Desktop:

Mobile:

[suyash1]

@erhan2  it is because desktop menu and mobile menu are different codes, you created code for header menu which is for desktop, please check if you have header mobile menu and create code for it

[DaisyVo]

HI @erhan2 

The menu on the desktop and mobile are different, so using the same code won't work for mobile. Try this code:

@media (max-width: 768px) {
.menu-drawer__menu-item[href="/collections/typewriter"] {
justify-content: flex-start;
padding-right: 30px;
}
.menu-drawer__menu-item[href="/collections/typewriter"]::after {
width: 20px;
height: 20px;
background-image: url('https://cdn.shopify.com/s/files/1/0697/5864/8603/files/writer.png?v=1736370118');
background-size: contain;
background-repeat: no-repeat;
margin-left: 8px;
}
}

In your store, the mobile version is stuck in loading mode, so I can only get the class for the CSS but not the image. Also, the class names are different for mobile compared to desktop.

I hope this helps

Best,

Daisy

[erhan2]

The code you posted didn't work at first, then I converted the code to this using chat gpt and ran it and it worked! Thank you very much again for your help!

@media (max-width: 768px) {
  .menu-drawer__menu-item[href="/collections/typewriter"] {
    justify-content: flex-start;
    padding-left: 30px; /* Sol taraf için boşluk */
    padding-right: 0; /* Sağ taraf boşluğu sıfırlanıyor */
  }
  .menu-drawer__menu-item[href="/collections/typewriter"]::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url('https://cdn.shopify.com/s/files/1/0697/5864/8603/files/writer.png?v=1736370118');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 8px; /* Metin ile ikon arasındaki boşluk */
    display: inline-block; /* İkonu doğru şekilde göstermek için */
  }
}