How to add collection icon on Menu items on mobile

Store Design
, , , ,

Topic summary

A user wants to display collection icons in their mobile menu, which currently only appear on desktop. The site uses the Xtra theme.

Problem identified:

  • Desktop menu shows collection images on sub-menu items
  • Mobile menu lacks this feature entirely
  • One respondent confirms the mobile menu code doesn’t include icon functionality by default

Solution provided:
Another user offers a CSS workaround:

  1. Navigate to Shopify > Theme > Customize
  2. Add custom CSS code to Theme settings > Custom CSS section
  3. The provided CSS uses media queries (max-width: 1000px) to adjust image positioning, sizing, and display properties for mobile menu items

The CSS snippet modifies several properties including position, width, height, margins, and uses flexbox to properly align icons alongside menu text. The discussion appears resolved with this technical solution.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
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