How can I narrow the mega-menu in Impulse theme to avoid covering the video?

Store Design
, , ,
1

Hello . So I created a mega-menu. On my store Healthspanx.org (Password: Spanx ), you can see the science page in the navigation. (Screenshot below) .
Hovering the mouse over it covers the entire video. As a result, it needs to be made narrower. must not cover the entire video.

Also, other items in the navigation open from top to bottom, but the science page opens from bottom to top

My store builds on Impulse theme.
Store URL: Healthspanx.org
Password: Spanx

I would greatly appreciate any help you can provide :slightly_smiling_face:

screnshot3.png
screnshot3.png1251Ɨ511 453 KB

2

Hey,

Go to Online Store > theme > actions > edit code.

Open assets folder > theme.css.

Copy and paste this code at the bottom of the file. Save.

.text-center .megamenu .grid {
  text-align: center;
  display: flex;
  gap: 0px;
}

.text-center .megamenu .grid .grid__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.text-center .megamenu .grid .grid__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 25px;
  min-width: 50%;
}
.text-center .megamenu .grid .grid__item div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;
}

.megamenu .site-nav__dropdown-link:not(.site-nav__dropdown-link--top-level) {
  width: max-content;
}

@media only screen and (min-width: 1025px) {
  .grid {
    width: 100%;
  }
}

@media only screen and (max-width: 1120px) {
  .text-center .megamenu .grid .grid__item {
    grid-template-columns: 1fr;
  }
}

Result:

dannyelo_0-1690771866983.png
dannyelo_0-1690771866983.png2518Ɨ1654 372 KB

Hope this helps!

1 Like
3

Thank you so much @dannyelo . You made my day. Its work :slightly_smiling_face:

But the menu still opens from bottom to top .
Is there a way to make it open from Top to bottom?
I would greatly appreciate any help :slightly_smiling_face:

4

You are welcome!

About the animation, Iā€™m not sure where is coming from. It may be animated with javascript.

1 Like
5

Oh okay @dannyelo Thank you so much for the help . Have a great day :slightly_smiling_face:

1 Like