Using an image link in main menu navigation (Minimal)

Highlighted
Shopify Partner
56 0 3

A client of mine wants to have an image instead of text for one item in the navigation bar in Minimal theme.

 

So next to a collection text it has a clickable image that leads to another collection.

 

Any chance one of ninjas know how to achieve this?

 

Thanks guys/gals!

0 Likes
Highlighted
Shopify Expert
1381 111 200

please share a store url to better assist

0 Likes
Shopify Partner
56 0 3

sop.lauvstore.com 

 

Notice one of the collections in the nav is white on a white background. That was done intentionally as it wasn't supposed to be obvious to most that go on the website

0 Likes
Highlighted
Shopify Partner
56 0 3

Sorry, It's Shop.lauvsongs.com

0 Likes
Highlighted
Shopify Staff
Shopify Staff
540 31 86

Hi, @William26.

 

Tira here, from Shopify Support.

 

This is a great question! We have several apps that would allow your client to an an image as a menu item on your main menu. Here are my recommendations:

 

Smart Menu - You can insert icons and text, images and more into your main menu.

Buddha Menu - You can add link lists with images and have tree, simple, tabbed and contact menus.

Globo Mega Menu - You can add block images, change background colours, and add hover effects to your menu.

 

For other menu apps, you can check out our App Store: Image in Menu apps.

 

If you have any questions about using these apps, you can contact the third-party developer by using the information located under the "Support" area of the app's page. 

 

Let me know if that helps!

Tira | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Shopify Partner
56 0 3

Hey Tira,

 

Thanks for the help. I'm not sure any of those apps can do what i want to achieve. I basically just want to put an image up by where the navigation is .

0 Likes
Highlighted
Shopify Partner
1281 169 403

I don't see a navigation at all on your site. Typically you could do something like this inside a forloop for your linklist. It would look something like this:

 

{% for link in linklists.main-menu.links %}
  {% if link.handle == 'contact-us' %}
    <a href="{{ link.url }}"><img src="/path-to-your-image.jpg"></a>
  {% else %}
    <a href="{{ link.url }}">{{ link.title }}</a>
  {% endif %}
{% endfor %}

So in this case, for your "Contact Us" link, it would use an image instead of the link title, and for all other links in the list it would use the link title.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
2 Likes
Highlighted
Shopify Partner
56 0 3

Thanks for the help again Ninthony! Forgive my ignorance, but where would this code go on my theme?

0 Likes
Highlighted
Shopify Partner
1281 169 403

Couldn't tell you, like I said I don't see a navigation at all on your site. This isn't copy paste code anyway, it's just an example of how you would accomplish something like that. The default minimal navigation code is found in site-nav.liquid in the snippets folder and is much more complicated than this example. The portion you'd want to modify would be on the first level of the loop:

 

    {% for link in site-nav.links %}
      {% if link.links != blank %}
      {% assign parent_index = forloop.index %}
        <li 
          class="site-nav--has-dropdown {% if link.active %}site-nav--active{% endif %}"
          aria-haspopup="true">
          <a
            {% if link.url != '#' %}href="{{ link.url }}"{% endif %}
            class="site-nav__link"
            data-meganav-type="parent"
            aria-controls="MenuParent-{{ parent_index }}"
            aria-expanded="false"
            {% unless template.name == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
              {{ link.title | escape }}
              <span class="icon icon-arrow-down" aria-hidden="true"></span>
          </a>
If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Shopify Partner
56 0 3

Sorry this is the preview of the unpublished theme im working on: https://vwyr2jov5h5z3mah-9719545918.shopifypreview.com

 

This is what my site.nav code looks like:

 

 

{% comment %}
List out your main-menu linklist (default)

More info on linklists:
- http://docs.shopify.com/themes/liquid-variables/linklists
{% endcomment %}
<nav>
<ul class="site-nav" id="AccessibleNav">
{% for link in site-nav.links %}
{% if link.links != blank %}
{% assign parent_index = forloop.index %}
<li
class="site-nav--has-dropdown {% if link.active %}site-nav--active{% endif %}"
aria-haspopup="true">
<a
href="{{ link.url }}"
class="site-nav__link"
data-meganav-type="parent"
aria-controls="MenuParent-{{ parent_index }}"
aria-expanded="false"
{% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
{{ link.title | escape }}
<span class="icon icon-arrow-down" aria-hidden="true"></span>
</a>
<ul
id="MenuParent-{{ parent_index }}"
class="site-nav__dropdown {% if link.levels == 2 %}site-nav--has-grandchildren{% endif %}"
data-meganav-dropdown>
{% for childlink in link.links %}
{% if childlink.links != blank %}
{% assign child_index = forloop.index %}
<li
class="site-nav--has-dropdown site-nav--has-dropdown-grandchild {% if childlink.active %}site-nav--active{% endif %}"
aria-haspopup="true">
<a
href="{{ childlink.url }}"
class="site-nav__link"
aria-controls="MenuChildren-{{ parent_index }}-{{ child_index }}"
data-meganav-type="parent"
{% unless request.page_type == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}
tabindex="-1">
{{ childlink.title | escape }}
<span class="icon icon-arrow-down" aria-hidden="true"></span>
</a>
<ul
id="MenuChildren-{{ parent_index }}-{{ child_index }}"
class="site-nav__dropdown-grandchild"
data-meganav-dropdown>
{% for grandchildlink in childlink.links %}
<li{% if grandchildlink.active %} class="site-nav--active"{% endif %}>
<a
href="{{ grandchildlink.url }}"
class="site-nav__link"
data-meganav-type="child"
{% unless request.page_type == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless %}
tabindex="-1">
{{ grandchildlink.title | escape }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li{% if childlink.active %} class="site-nav--active"{% endif %}>
<a
href="{{ childlink.url }}"
class="site-nav__link"
data-meganav-type="child"
{% if childlink.active %}aria-current="page"{% endif %}
tabindex="-1">
{{ childlink.title | escape }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<li{% if link.active %} class="site-nav--active"{% endif %}>
<a
href="{{ link.url }}"
class="site-nav__link"
data-meganav-type="child"
{% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
{{ link.title | escape }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</nav>

0 Likes