Remove text below collection card in mega menu Fabric theme

Store Design
, , , ,
1

Hi guys,

I need to remove the text under my collection-images in my mega menu (the imaged itself already have the title in them). On desktop this code works fine:
.wrap-text {
display: none;
}

But the normal menu text disappears on mobile menu too if I apply this code (home, shop, etc.). Can someone help me? I’m using the fabric theme.

Here is a preview link

Thanks!

3

Hey @IMYOURGIRL

Wherever you’re using that code, replace it with this code below. It will only work for desktop now.

@media screen and (min-width: 768px) {
.wrap-text {
    display: none !important;
}
}
Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

4

That rule has selector which is too broad.

Try this instead:

.menu-drawer__menu-item:has(img) .wrap-text,
.mega-menu__link:has(img) .wrap-text {
  display: none;
}

This selector will hide .wrap-text but only if it’s inside either .menu-drawer__menu-item (for mobile menu) or .mega-menu__link (for desktop menu) which also contains an image element.

So would not hide text if there is no image in this menu item.

5

Thank you this is perfect! Works on mobile + desktop now. Very happy :):grinning_face: