How to make my Drop Down Menus appear on Hover? - Spark Theme

Technical Q&A
1

I have tried many things but usually the answers I have found are for the free themes and do not work on my Spark Theme.

2

Hi @LSAccounting ,

Please send your site and if your site is password protected, please send me the password. I will check it.

3

Hi @LSAccounting ,

Go to Assets > theme.css and paste this at the bottom of the file:

li[data-submenu-parent]:hover .header__links-icon .icon {
	transform: rotate(-90deg) !important;
}
li[data-submenu-parent]:hover .navigation__submenu[data-depth="1"] {
	left: unset !important;
    margin-top: 0 !important;
    transition: opacity .25s ease-in-out,margin .25s ease-in-out,visibility .25s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
}

Hope it helps!

4

Perfect!

Is there a way of also having my sub-menus displaying in that way? As at the moment, I can hover for most, but still have to click on the sub ones.

5

Hi @LSAccounting ,

Go to Assets > theme.css and paste this at the bottom of the file:

.navigation__submenu {
	padding-left: 0 !important;
    padding-right: 0 !important;
}
.navigation__submenu-item {
	padding: 0 var(--spacing-medium-large) !important;
}
.navigation__submenu-item:hover .navigation__submenu-icon .icon {
	transform: rotate(-90deg) !important;
}
.navigation__submenu-item:hover .navigation__submenu[data-depth="2"] {
	margin-top: calc(var(--spacing-medium-large) * -1) !important;
    transition: opacity .25s ease-in-out,margin .25s ease-in-out,visibility .25s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
	left: var(--width) !important;
}

Hope it helps!

6

Thank you so much! :grinning_face: