Shopify themes, liquid, logos, and UX
Hi
I'm having issues with the collection links on the top navigation bar for mobile. On my homepage www.ecobeau.co.uk the links on the navigation bar on desktop work well. You can click on the top header collection or any of the drop down links and they work but on the mobile the top header/collection title link doesn't work (the sub menus do work though).
Could anyone advise me on how to fix this please?
Thanks so much
Becky
Hi,
As I have check the navigation its working. Can you share the screenshot please?
Hi @ecobeau,
It will not work because mobile menu developed in such a way that when you click on the main menu then it will open the sub menu.
You need to customize the mobile menu in your store so for that you can here any Shopify expert.
Thanks,
Unfortunately a screen shot won't show the problem. The menu appears but will only click on the subheadings links and not the top heading on mobile.
Thanks for replying though
I am also having this issue with the Minimal Theme. I have a SHOP link and COLLECTIONS link in my main menu. Under SHOP there are sub-links for T-Shirts, Hats, Accesories. Under COLLECTIONS, I have 3 separate collections linked. On desktop, the SHOP link goes to a link of All Products, which I set up this way. COLLECTIONS goes to a page showing All Collections. On mobile however, SHOP and COLLECTIONS don't link to anything. They just open the sub menu as the previous person mentioned. The sublinks in the sub menus are working fine.
BUT there is something that the previous person didn't mention that I am seeing in my shop. On mobile, under SHOP, there is a new sub link ALL PRODUCTS, which seems to be automatically created because I didn't add this link to navigation and it's only visible on mobile. This is fine with me since that is the page SHOP should be linked to and it's easier for the mobile menu. However, there is no ALL COLLECTIONS link under COLLECTIONS which I would think should be automatically created as well since it's basically the same as the other one.
Any help on this matter would be appreciated. Thanks!
**UPDATE: I found a fix. Not sure if it's for everyone but it worked for me. In the mobile-nav.liquid snippet, I found the following code:
{% if link.type == 'collection_link' or link.type == 'blog_link' or link.url == routes.all_products_collection_url %}
<li class="mobile-nav__sublist-link {% if link.active %}site-nav--active{% endif %}">
<a href="{{ link.url }}" class="site-nav__link"{% if link.active %} aria-current="page"{% endif %}>{{ 'collections.sorting.all_tags' | t }} <span class="visually-hidden">{{ link.title | escape }}</span></a>
</li>
{% endif %}
And added this code underneath it:
{% if link.type == 'collection_link' or link.url == routes.collections_url %}
<li class="mobile-nav__sublist-link {% if link.active %}site-nav--active{% endif %}">
<a href="{{ link.url }}" class="site-nav__link"{% if link.active %} aria-current="page"{% endif %}>{{ 'collections.sorting.all_tags' | t }} <span class="visually-hidden">{{ link.title | escape }}</span></a>
</li>
{% endif %}
I basically copied the same piece of code above but from the 1st line removed or link.type == 'blog_link' and replaced routes.all_products_collection_url with routes.collections_url
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024