Mega Menu Not Showing on Home Page

[gordonpeters]

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/

[devcoders · Accepted solution]

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!

[gordonpeters]

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. 

[devcoders]

Ok sure I will check and update you.