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

RaimaNasir
Tourist
7 2 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

Change Example: 

RaimaNasir_0-1709287119414.png

 

Replies 4 (4)

JasmeetVT14313
Shopify Partner
204 48 56

Hi @RaimaNasir 

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

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
RaimaNasir
Tourist
7 2 1

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.

JasmeetVT14313
Shopify Partner
204 48 56

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.

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

Benjamen
Shopify Partner
54 4 7

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.

Benjamen @ Helium
- Customer Fields ✪✪✪✪✪ (300+ reviews)
- Meteor Mega Menu ✪✪✪✪✪ (200+ reviews)