Dropdown menu on hover disappears when navigating (debut theme)

Technical Q&A
1

I have implemented the dropdown menu following this tutorial (https://mercytapscott.com/shopify-debut-show-drop-menu-hover/) However now, after implementing this, my images shows a blue tint (https://imgur.com/a/U2vp977). After clicking on a different product image, it doesnt show in the product page gallery. Instead it opens a new link to show the image. If i do not add the last line of code (.site-nav li { position: relative; } ) the menu disappears as soon as i try to navigate to the sub menu.

How can i solve this?

Ive also tried using this solution here but to no avail. It shows a blue tint and opens the image in a new link when clicked.

https://community.shopify.com/c/Shopify-Design/Dropdown-menu-gone-on-hover/m-p/532996#M135800

2

please share a store url to better assist

3

The password is ABC
https://tinyurl.com/y56f2hx8

You can check on it. Ive removed the code that made the blue tint but makes
the drop menu works.

4

Hello ,
Please add this code at the bottom of theme → edit code → assets → theme.scss.liquid
.site-nav__dropdown–centered {
top: 27px !important;
}

2 Likes
5

Sweet! That solved all the problem. Would you also know how i can implement a code to have a color swatch in my collection page?

For all those wanting to get it down in the debut theme. Heres how:

GO to theme.scss.liquid and add this line.

// Hover dropdown menu display
.site-nav--has-dropdown:hover .site-nav__dropdown,
.site-nav--has-dropdown:focus .site-nav__dropdown {
display: block;
}

.site-nav__dropdown { top: 25px; }

// Centered dropdown
.site-nav__dropdown--centered {
  width: 100%;
  padding: 0;
  text-align: center;
  top: 27px !important; // >>>>>>> ADDED THIS LINE TO MAKE THE MENU SHOW WHILE NAVIGATING
}
2 Likes
6

@Shortboi

I can not see any color swatches on the collection page. So please come with a reference screenshot.

7

I am also facing the same issue , but I cannot see any file named theme.scss.liquid