Enlarge & Move Position of Collection Images in Navigation (Enterprise Theme)

Shopify Discussion
, ,

Topic summary

A user seeks to reposition collection images in their Enterprise theme’s mega menu navigation—specifically moving images above collection names and increasing their size. The store uses a column-based mega menu layout.

Proposed Solution:
A community member provided custom CSS code to add to the navigation-mega-columns.css file (located in Assets). The code targets screens wider than 769px and modifies:

  • Flex direction to column layout
  • Image minimum width to 60px
  • Position property to relative

The CSS snippet adjusts .mega-nav--columns, .main-nav__collection-image, and .nav__item__toggle selectors to achieve the desired layout change.

Alternative Approach:
Another participant suggested using the “Prism” app (Meteor Mega Menus), which was specifically designed for this type of mega menu customization with image-first layouts.

Status: The discussion remains open pending confirmation whether the CSS solution or app recommendation resolves the issue.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

I want to be able to move the collection images in the column mega menu to the top of the collection name and make the image size bigger like in the example shown below. My Store:

navigation images.png
navigation images.png1353×416 42.8 KB

Change Example:

RaimaNasir_0-1709287119414.png
RaimaNasir_0-1709287119414.png855×310 92.1 KB

2

Hi @RaimaNasir

Please provide the store URL, so that I can provide you with detailed solution/ code as per your theme.

3

The store is not live yet. But you can check out the other store I have on the same theme here https://www.shredderwarehouse.com/. The menu ‘Brands’ is the one I need to update.

4

Try adding the below piece of code to the end of your “navigation-mega-columns.css” file which can be found under Assets

@media screen and (min-width:769px){
.mega-nav--columns .child-nav__item--toggle:not(.nav__item--no-underline) {
flex-direction: column;
}

.mega-nav--columns .main-nav__collection-image img {
min-width: 60px;
position: relative;
}
}

Let me know if it helps or not.

5

Hello!
If you’re open to an app, we designed our “Prism” template with exactly this use case in mind.
You can find the app here: https://apps.shopify.com/meteor-mega-menus
I hope this helps.