Add Hover Effect to Mega Menu - Dawn Theme Shopify

Shopify › Dawn › Theme
, ,

Before you start it

  • Mega menu is released on Dawn 5.0.0
  • Dawn theme version at this post is 6.0.2
  • Duplicate your theme

Quick Look 👀

Getting started ✏️

theme.liquid

  • Online store > themes > Actions > Edit code > Layout > theme.liquid

  • Insert code before </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>	
  function bindMouseOverToMegaMenu (item) {
    item.addEventListener("mouseover", () => {
        item.setAttribute("open", true);
        item.querySelector(".mega-menu__content").addEventListener("mouseover", () => {
          item.setAttribute("open", true);
        });
        item.querySelector(".mega-menu__content").addEventListener("mouseleave", () => {
          item.removeAttribute("open");
        });
      item.addEventListener("mouseleave", () => {
        item.removeAttribute("open");
      });
    });
  }
  let items = document.querySelector(".header__inline-menu").querySelectorAll("details.mega-menu");
  items.forEach(bindMouseOverToMegaMenu);
  
</script>

header.liquid

  • Online store > themes > Actions > Edit code > Sections > header.liquid

  • Replace css code from line 86 to line 117 ( between {%- style -%} and {%- endstyle -%}) with code below

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.header{
  padding-top: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px;
  padding-bottom: {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px;
}

.section-header {
  margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
  .section-header {
    margin-bottom: {{ section.settings.margin_bottom }}px;
  }
}

@media screen and (min-width: 990px) {
  .header{
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
  }
}
.mega-menu-connector {
  position: relative;
  display: flex;
  justify-content: center;
}
.mega-menu-connector:after {
  content: '';
  width: 100%;
  position: absolute;
  opacity: 0;
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}

Insert code at line 464 before <summary>

1
<div class="mega-menu-connector"><holder></holder></div>