How can I add images to my navigation menu in Debut theme?

[danyx1980]

I’m looking to achieve a navigation similar to this store, where an image related to the navigation item is shown in the menu, but the image redirects to a different URL, and might not be the collection image.

Currently working with the Debut theme, and have some restrictions on how the site needs to look, so not any app/theme could work.

If needed I could develop a custom navigation bar from scratch, assuming I could add custom properties to routes (image, and image href).

[PaulNewton]

Different ways:

1. Make it use the collection image, or the first products|variants image
2. Makie it use the content of a page or object(collections,products), where the only content is an image
3. make theme settings to assign the image without having to hardcode it
4. make a section so you can assign the image without having to hardcode it
5. add the images to theme assets and hardcode them with asset filters
6. add to admin files and hardcode them with asset filters
7. add images to to admin-files and add navigation links to those images CDN urls & add code to theme to parse image urls (make image name same as collection|product handle)

[danyx1980]

1. make theme settings to assign the image without having to hardcode it

Could you expand a little more on this? Is it possible to add custom properties to navigation objects?

make a section so you can assign the image without having to hardcode it

Like the last point, would it be possible to add a custom property to the navigation object, or would it require me to somehow link the image with the navigation object (since I want to add a different image to each menu section).

Hardcoding is out of the question, as I need my end user to be able to change both the URL and the image at any time.

[PaulNewton]

@danyx1980

1. make theme settings to assign the image without having to hardcode it

Could you expand a little more on this? Is it possible to add custom properties to navigation objects?

Custom data does not have to added to the navigation object or the navigation menu admin.

Simply reference the theme setting how|where want the image needs to show up.

{% for link in linklists[section.settings.main_linklist].links %}
 {{ settings.nav_image_1 }}
{% endfor %}

Though “data” could be added to a navigation in the menu titles using a convention so the entries maps to an image name.

{% for link in linklists[section.settings.main_linklist].links %}
 {% if link.title contains "KEYWORD_CONVENTION" %}
  {{ settings.nav_image_1 }}
  {{ continue }}
 {% elseif link.type == collection_link %}
  {{ collection.image }}
  {{ continue }}
 {% endif %}
{% endfor %}

Longer logic will benefit from using a {% case %} switch statement

[michael-helium]

@danyx1980 Looks like the store has since been disabled, but they used to use the Meteor Mega Menu to display images in the nav. Using the app, you can use images from products, collections, or pages OR upload a custom image for any menu item.

Here’s a quick example:

[PaulNewton]

ha! someones got deep analytics.