Mega menu images and drop-down menu extend downward

Store Design
, ,
1

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.

Screenshot 2023-10-27 at 12.23.12 PM.png
Screenshot 2023-10-27 at 12.23.12 PM.png1690×780 155 KB

Example.

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

Screenshot 2023-10-27 at 12.24.32 PM.png
Screenshot 2023-10-27 at 12.24.32 PM.png540×1542 38.7 KB

The dropdown I want.

Screenshot 2023-10-27 at 12.27.15 PM.png
Screenshot 2023-10-27 at 12.27.15 PM.png620×588 28.3 KB

my current menu.

https://softandsassys.com/

My website. Thanks.

2

@Maelaw

Please check the following URL for help.

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

Thanks!

3

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!

4

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.

5

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