Mega menu images and drop-down menu extend downward

Does anyone know how to add the image in the drop down menu like this?

https://themes.shopify.com/themes/stiletto/styles/craft/preview?surface_inter_position=1&surface_intra_position=11&surface_type=all

This is my current theme but somehow I can’t add image like this theme.


Example.

Another issue is, I want the drop-down menu on the mobile phone to extend downward, not to open a new page.


The dropdown I want.


my current menu.

https://softandsassys.com/

My website. Thanks.

@Maelaw

Please check the following URL for help.

https://fluorescent.co/help/stiletto/header#mega-navigation-menus

Thanks!

Hey Maelaw,

You will need to enable the mega menu setting in your theme. It can be a little confusing at first, but you have to set up your navigation in your Shopify store first and THEN activate the menu in your theme. Here’s some steps to follow:

  • First, go to Online Store under Sales Channels (screenshot).
  • Then setup your links in the Main Menu, this is the default menu in most themes (screenshot).
  • Once you’ve added your links to the menu go to your theme editor (screenshot).
  • While in the theme editor:
    • You need to define which menu item you want the mega menu to attach to.
    • From there, you should see the menu links you’ve added to a menu item show up.
    • Don’t forget to add your image.
    • See screenshot that includes each step here.

This can be a lot to setup, but once you set up one - you’ll get the hang of it.

If you’d rather use an app for more flexibility - we built one called Meteor Mega Menus that I highly recommend using. We have multiple template styles, and allow for images on mobile with our Image Grid template.

I hope this helps!

Oh and regarding your mobile experience: I don’t think your theme can support that. If you want something similar to your example, our app’s mobile menus open like that.

You can also check following tutorial, which helped me create a custom mega menu without any APP