How can I correctly position a mega menu below its corresponding menu item?

Store Design
, , , , , , , , , ,
1

In the screenshot below, you’ll notice that I’ve created a mega menu however it isn’t positioned directly beneath its corresponding menu item. My goal is to have it positioned right below the menu item indicated by the red marker. I intend to add more mega menus so the solution should effect the upcoming mega menus as well.
Store: https://intuitsport.com/

Theme: Flex

Thank You in advance

Untitled-143.jpg
Untitled-143.jpg1920×894 108 KB

1 Like
2

Hello there,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > style.css and paste this at the bottom of the file:
.header__link:hover, .header__link.is-active, .header__link > a:hover, .header__link > a.is-active {
color: red;
fill: red;
font-weight: 900;
font-size: 15px;
}
.mega-menu a:hover {
color: red;
}
.navbar-dropdown .navbar-link:hover, .navbar-dropdown .navbar-item:hover {
    color: red;
}

ZestardTech_0-1693987379869.png
ZestardTech_0-1693987379869.png1919×738 196 KB

3

Hi @technase ,

This is David at SalesHunterThemes.

Thank you for your question.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → theme.liquid file.

Add the following code in the bottom of the file above tag

David_SHT_0-1693987381913.png
David_SHT_0-1693987381913.png2030×970 129 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team