Menu drop down selection issue

Store Design
, ,

Topic summary

A user is experiencing a dropdown menu malfunction where clicking on ‘Our service’ causes the submenu to disappear immediately, preventing navigation. Additionally, they want the service items distributed more evenly, as there’s excessive empty space on the left side.

Proposed Solution:
Another participant referenced a similar issue with Dawn 13.0 theme and suggested CSS modifications:

  • Widen the dropdown extension by adjusting the .header-menu .mega-menu__list grid template columns
  • Change column layout from the default 6 columns to 4 columns for better distribution
  • Add positioning CSS to the .header-menu summary[open]::after element with specific margin, height, and background properties

The original poster confirmed they’re trying the suggested approach. The issue appears related to CSS hover/click behavior in the header menu structure, and the discussion remains ongoing as the fix is being tested.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

1.I am facing issue with the main menu, when I click on ‘Our service’ to select submenu items, the menu pop up goes away. Hence, user will face difficulty in navigation. Can someone please help me fix this issue?
2. Also, I want the Services items get distributed evenly, there is much space left at the left side.

Link - https://734bb6-cf.myshopify.com/
Password - cheold
PFA

WhatsApp Image 2024-07-07 at 09.42.09_3d62c14b.jpg
WhatsApp Image 2024-07-07 at 09.42.09_3d62c14b.jpg1156×520 68.8 KB

2

https://community.shopify.com/post/2433324

For your menu you may want to make the “extension” wider:

header-menu [open] summary:after {
  content: "";
  position: absolute;
  top: 3em;
  height: 2em;
  left: -4em;
  right: -4em;
  background:red;
}

Also, by default the dropdown is designed with 6 columns. You can change it to, say 4 columns:

header-menu .mega-menu__list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
3

Yes, right