Shopify themes, liquid, logos, and UX
Hey everyone!
I have a small issue with the dropdown menu of my shopify store.
I am using the Venture Theme and my store name is: https://yogoa.net
The Header Menu is a dropdown menu that lets people chose between categories like "Shoes, Home Decor etc." I haveedited this menu so that when you click/ hover over one of the categories a dropdown menu appears that lets you chose more specific products.
Here comes the issue. When clicking on one of these menus the dropdown menu turns into a giant banner that stretches over the complete screen and all the subcategories are aligned on the left.
Here is a picture to show what I mean exactly:
What I am trying to do is edit this dropdown menu so that it is only a small square right below the selected category and not to stretch over the complete screen clocking half the page.
I've been trying to solve this in the theme.scss.liquid code and have been able to change the formatting in some ways but not exactly how I want it.
Here is what the code snippets look like that I have edited:
----------------------------------------------------------------------------------------------------------------------------------------------------
/*================ Dropdowns ================*/
.site-nav__dropdown {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
z-index: $z-index-dropdown;
li {
display: block;
}
}
---------------------------------------------------------------------------------------------------------------------------
Aswell as:
----------------------------------------------------------------------------------------------------------------------------------------------------
/* Hover Menu */
.site-header .site-nav__item:click .meganav {
opacity: 1;
visibility: visible;
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all 0.8s cubic-bezier(0.16, 0.97, 0.47, 0.98), opacity 0.4s cubic-bezier(0.16, 0.97, 0.47, 0.98);
}
----------------------------------------------------------------------------------------------------------------------------------------------------
I really hope someone can help me out with this and would greatly appreciate any help!
Best Regards!
User | RANK |
---|---|
155 | |
137 | |
75 | |
71 | |
62 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023