Mega Menu Not Showing on Home Page

Store Design

Topic summary

Mega menu fails to appear on the home page when using a custom header section (header-group-2); it works on other pages with the default header-group. The store runs Dawn theme v15. The merchant added a conditional in theme.liquid to load header-group-2 on the index template and created header-group-2 by copying the header-group JSON.

Key troubleshooting steps suggested:

  • Ensure any JavaScript that powers the mega menu is also included/initialized in header-group-2.
  • Compare Liquid markup with header-group to confirm the mega menu structure/snippets match.
  • Verify CSS classes/selectors are identical so styles and interactions apply to header-group-2.
  • Check JSON/settings for header-group-2 in the theme editor to enable/configure the mega menu.
  • Test after clearing cache/incognito.

Actions/updates:

  • The merchant shared a collaborator access code with the helper.
  • The helper agreed to review the store and report back.

Status: Ongoing; no resolution yet.

Summarized with AI on December 14. AI used: gpt-5.
1

My mega menu is not showing up on the home page, can anyone help fix it?

I have created two different header menu styles one for the home page and another for all other pages by adding the following code to theme.liquid file.

{% if template.name == ‘index’ %}
{% sections ‘header-group-2’ %}
{% else %}
{% sections ‘header-group’ %}
{% endif %}

On the home page header which uses ‘header-group-2’ the mega menu does not work.

The mega menu works perfect on other pages however for ‘header-group-2’ it does not work.

To create the section ‘header-group-2’ I copy and pasted the code from json template header-group.json.

I am using Dawn theme version 15 as my base theme.

Store url: https://fourthtrimester.au/

1 Like
2

Hello @gordonpeters

  • Check the JavaScript for the Mega Menu:

    • Many Shopify themes use JavaScript to handle dropdowns and mega menus. If the header-group-2 section file is missing any JavaScript that header-group has, this could cause the mega menu to fail.
    • Make sure that any JavaScript code related to the mega menu is included or referenced in header-group-2 as well.

  • Verify Liquid Code for the Mega Menu:

    • In your header-group-2 section file, check if the Liquid code for displaying the mega menu is correctly in place and matches the structure of the original header-group section.
    • Look specifically for code blocks or snippets that render the mega menu items, and confirm they’re identical or at least functionally equivalent to those in header-group.

  • Check for CSS Styling Differences:

    • Sometimes, specific CSS classes might be applied only to header-group, affecting the mega menu’s visibility or functionality. Make sure header-group-2 has the same CSS classes as the original header-group for the mega menu styling.
    • You can inspect the HTML in your browser’s developer tools to see if there’s a difference in class names or styles between header-group and header-group-2.

  • Confirm JSON Data for the Mega Menu:

    • Since you copied the JSON file, ensure that any specific settings or customizations in header-group.json related to the mega menu were correctly transferred to header-group-2.json.
    • Some settings or references might need to be updated in header-group-2 if they are hard-coded for header-group.

  • Check for Theme Customizer Settings:

    • Some Dawn theme versions use the theme customizer to control the mega menu options. Open the theme editor for header-group-2 and ensure the mega menu settings are correctly enabled or configured.

  • Clear Cache and Test on Incognito Mode:

    • Sometimes, changes may not immediately appear due to caching. Clear your browser cache or test in incognito mode to ensure your most recent updates are being loaded.

Note: If you’re not familiar with coding, you can me access to your store, and I’ll make the changes for you. Thank you!

1 Like
3

Hi @devcoders ,

I have tried to work it out but have had no luck so far. I sent you a message with our Collab Request Code.

1 Like
4

Ok sure I will check and update you.