Collection links on top navigation bar not working on mobile - Debut theme

ecobeau
Tourist
11 0 1

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 

Replies 4 (4)

oscprofessional
Shopify Partner
15831 2369 3072

Hi,

As I have check the navigation its working. Can you share the screenshot please?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Prezentech
Shopify Partner
389 76 100

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,

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire us.
Feel free to Contact me for shopify help on support@prezentech.com
Shopify Design Changes | Shopify Custom Theme Design and Development | Shopify App Development
ecobeau
Tourist
11 0 1

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

Jmarie929
Visitor
1 0 0

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