Re: Dropdown menu on hover disappears when navigating (debut theme)

Solved

Dropdown menu on hover disappears when navigating (debut theme)

Shortboi
Tourist
7 0 2

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

Accepted Solution (1)
Perennial
Shopify Partner
1472 115 234

This is an accepted solution.

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

View solution in original post

Replies 6 (6)

Perennial
Shopify Partner
1472 115 234

please share a store url to better assist

Shortboi
Tourist
7 0 2
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.
Perennial
Shopify Partner
1472 115 234

This is an accepted solution.

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

Shortboi
Tourist
7 0 2

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
}
Akshay_V
Shopify Partner
438 16 58

@Shortboi 

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

Akshay Vaghasiya | Email: hello@lavitastic.com | Skype: akshayvaghasiya84
Want to modify theme or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Buy me a coffee PayPal
Dev441
Shopify Partner
9 0 0

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