Venture theme Main Menu Dropdown Banner

12 1 2

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:

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!

Replies 0 (0)