Re: Top Menu Bar Doesn't Allow Me To Click The First Menu Item

Top Menu Bar Doesn't Allow Me To Click The First Menu Item

Luc1234
Tourist
12 0 1

I've created Menu Items with main categories and then categories beneath those. (dawn theme)

 

Main category: iPhones

Drop down from iPhones: more Iphones

 

I can click on the drop-down menu, but I can't click the first main category (from example, Iphones) to show all the products from the drop-down options. 

 

Does anyone know how to fix this? Thanks!
Site: Designyourcase.nl
Password: Voetbal

Replies 6 (6)

makiomilano
Excursionist
29 0 4

I have the same problem and nobody answer.

Vinsinfo
Shopify Partner
447 152 149

@Luc1234 We can achieve this through some customization in code. Please follow below steps to redirect to the respective main category page and let me know whether it is useful for you.

1. From admin, go to "Online Store" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Search "header-dropdown-menu.liquid " and "header-mega-menu.liquid" and replace the below code with "<span {%- if link.child_active %} class="header__active-menu-item" {% endif %} > {{- link.title | escape -}} </span>" like below screenshot.

 

<a href="{{ link.url }}">
    <span {%- if link.child_active %} class="header__active-menu-item" {% endif %} > {{- link.title | escape -}} </span>
</a>

priyavinsinfo_0-1709797409195.png  priyavinsinfo_1-1709797415295.png

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
Luc1234
Tourist
12 0 1

Hello thanks for your reaction But what to I need to delete first? I know I need to paste this somewhere but what code do I need to delete to replace it with this?

Luc1234
Tourist
12 0 1

Hello, it worked but now the name is a other color then white. How can I resolve this?
Thanks!

Luc1234_0-1709816894558.png

 

Vinsinfo
Shopify Partner
447 152 149

@Luc1234 Please add below code in the "if" condition in the code which we provided in the previous comment and let me know whether it helps you. Please find the attached screenshot for your reference.

 

link.current or

 

priyavinsinfo_0-1709823143633.png

 

Then, find "base.css" file and paste below code at the bottom of the file.

 

header-menu .header__menu-item a {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
davanpagui23
Visitor
1 0 0

Hi,

 

Thank you for providing this solution. It works only on desktop but not on mobile, can you please help resolve the issue on mobile?