Using an image link in main menu navigation (Minimal)

Highlighted
Shopify Partner
30 0 0

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
1353 111 181

please share a store url to better assist

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Shopify Expert Page: https://experts.shopify.com/perennialsolution
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Shopify Partner
30 0 0

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
Shopify Partner
30 0 0

Sorry, It's Shop.lauvsongs.com

0 Likes
Highlighted
Shopify Staff
Shopify Staff
422 29 62

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
30 0 0

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
1200 162 326

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
30 0 0

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

0 Likes
Highlighted
Shopify Partner
1200 162 326

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
30 0 0

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