Menu drop down selection issue

Solved

Menu drop down selection issue

SiliconValley
New Member
4 0 0

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

Accepted Solution (1)

tim
Shopify Partner
3643 317 1346

This is an accepted solution.

https://community.shopify.com/c/shopify-design/dawn-13-0-megamenu-dropdown-is-dissapearing-after-hov... 

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));
}
If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Replies 2 (2)
SiliconValley
New Member
4 0 0

Yes, right

tim
Shopify Partner
3643 317 1346

This is an accepted solution.

https://community.shopify.com/c/shopify-design/dawn-13-0-megamenu-dropdown-is-dissapearing-after-hov... 

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));
}
If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com