Navigation

[NatalieTWB]

Hi,

I am struggling with the navigation and I do not know where I am going wrong. 

I am trying to have subsections, but for some reason, the links only work for the lowest level of navigation.

=> For example, My theme is Dawn update, The top navigation includes "catalog", which works fine on its own.

=>Then I add a section for product types (say 'journals'), then the catalog link does not work anymore. despite working originally.

=> Likewise, if I add size or material as a 'Journals' sub section, neither Catalog nor journals work anymore, despite looking nested, as it should.

Seriously annoying as it would be clearer if all levels worked. I have added collections to go round the problem but makes for a very messy navigation.

Any suggestion?

[rajweb · Accepted solution]

Hi @NatalieTWB ,

1. Dawn Theme Behavior for Top-Level Menu Items

The Dawn theme and many other Shopify themes often handle top-level navigation links differently. By default:

• Top-level links (like "Catalog") may only serve as "parent" items and not clickable if they have submenus.
• This is to encourage users to explore sub-categories, but this behavior can be changed.

2. Fix for Non-Clickable Parent Links

To make both the parent and child links functional, follow these steps:

a. Ensure Correct Link Setup in Navigation

• Go to Online Store > Navigation.
• Open the Main Menu.
• Ensure that "Catalog" has a valid link (likely to the full product catalog or a collection).
• For each sub-item (e.g., "Journals", "Sizes", etc.), ensure that they are correctly nested under "Catalog" and link to the relevant collections or pages.

b. Make Parent Links Clickable

If the parent links (e.g., "Catalog" and "Journals") are not clickable, the theme may have JavaScript or CSS that disables them when there are submenus. To make them clickable again, follow these steps:

1. Custom JavaScript Fix: Add custom JavaScript to your theme to allow the parent links to remain clickable even when there are dropdowns.

   • Go to Online Store > Themes > Actions > Edit Code.
   • Open the theme.js or global.js file (depending on your theme's structure).
   • Add this script to ensure parent links are clickable:

"document.querySelectorAll('.header__menu-item').forEach(function(menuItem) {
if (menuItem.querySelector('.header__submenu')) {
menuItem.addEventListener('click', function(event) {
if (!event.target.classList.contains('has-submenu')) {
window.location.href = menuItem.querySelector('a').href;
}
});
}
});"

This will allow the user to click both the parent (like "Catalog") and the child links.

2. CSS Adjustment (if necessary): Sometimes, CSS prevents top-level links from being clickable. Ensure that there are no styles blocking the click on parent links by adding this to your CSS:

  ".header__menu-item.has-submenu > a {
pointer-events: auto !important;
}"

This ensures that top-level links remain clickable even if they have submenus.

Summary of Steps:

1. Ensure each navigation item is properly linked in Online Store > Navigation.
2. Add custom JavaScript to make parent links clickable while keeping submenus intact.
3. Double-check CSS to ensure there’s no styling blocking the parent link click.
4. Use Mega Menu if needed to manage large, multi-level navigation more efficiently.
5. Test for any theme or app conflicts that could interfere with navigation.

Let me know if you need further clarification or assistance! 

[NatalieTWB]

Thank you, i will get help with this but that's super helpful, thank you.