Theme: C2 (I believe)
Hi! On my website Sewing Machines | Ryan’s Sewing and Vacuum Center (ryansewnvac.com),
When I hover over the navbar items everything works perfectly. When I hover over the drop-down items that contain a submenu (in my case the accessories drop down) the submenu appears directly underneath my navbar. I’ve messed around in the inspect because I am more familiar with vanilla html and css. However, the solutions I came up with inspect I was unable to apply to the actual theme as I couldn’t find where the submenu classes were. Any help and suggestions would be much appreciated!
Hello @RyanSewVac
Can you please share the actual screenshot ? that how you want it to look like, so i can check and find the issue.
Hi here is the screenshot of what it is doing now
.
.
This is what I able to get using the inspect tool and messing with the css.
This is what I want it to look like however I am only able to make it look like this by manually setting the spacing in the css.
Unfortunately, none of the solutions I tried would affect anything when I tried to change it in the actual site.
Hello @RyanSewVac
I got it and try to make it as you want it to.
you just need to follow below steps:
-
Go to admin > Online store > Edit code.
-
In code directory, find the file named “Custom.css” and open it.
-
Copy below mentioned code and paste it at top of the file.
@media only screen and (min-width: 799px) {
.navbar-dropdown .has-submenu .navbar-submenu {
height: 0;
transition: height 0.5s ease-out;
}
.navbar-dropdown .has-submenu:hover .navbar-submenu
{
position: relative !important;
left: 0 !important;
height: auto !important;
transition: height 0.5s ease-in;
}
.has-submenu:hover .icon.header__menu_dropdown svg {
transform: rotate(-180deg);
}
}
- Don’t forget to save the file after making changes.
Hope this solution works better for your issue.
Thank you I appreciate it!
