How to add collection icon on Menu items on mobile

Store Design
, , , ,
1

Hi, everyone,

How do I turn on images of the collections on the mobile layout of the menus?

Attached is a picture of the desktop layout with the images of the collections on each sub-menu item line on the left. However, when I check the mobile layout there’s no icon. Can anyone point me how to reveal the image of the collection on the mobile layout?

Website is: theoutdoorarmory.com

Theme: Xtra

Thanks,

Outdoor Armory

2

@outdoorarmory desktop and mobile menus are different, mobile menu do not have any code for any icon

3

You can follow the instruction below:

  1. Go to Shopify > Theme > Customize

  2. Copy and paste this code on Theme settings > Custom CSS section

@media only screen and (max-width: 1000px) {
    #header-outer #nav>ul>li>ul ul li a>.img {
        position: static;
        width: auto !important;
        height: 29px !important;
        margin-top: 0;
    }
    #root #header-outer #nav>ul>li>ul ul li a .img img {
        margin-left: 0;
        display: block;
        transform: none;
        margin-right: 0;
    }
    #header-outer #nav>ul>li>ul ul li a {
        display: flex;
    }
}

Done

1 Like