Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
Solved! Go to the solution
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;
}
please share a store url to better assist
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;
}
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 }
@Shortboi
I can not see any color swatches on the collection page. So please come with a reference screenshot.
I am also facing the same issue , but I cannot see any file named theme.scss.liquid
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024