background hover on menu item - Forum | JoomShaper
Solved Helix Framework

background hover on menu item

Asked by Laurent 4 years ago Last activity 4 years ago

Hi,

Do you know how can I do this effect for menu hover items?
See here : https://prnt.sc/FZLLXNcSPJgg
I can do it for active menu item like this, see below :

.sp-megamenu-parent>li.active>a,
.sp-megamenu-parent>li.active:hover>a {
    background-color: #fff;
    border-radius: 30px;
    height: 30px;
    display: flex;
    align-items: center;
}

But does not work for hover effect.

Thanks
L.

Accepted answer

Marked as the solution
Mehtaz Afsana Borsha Staff
4 years ago

Sorry we do not provide customization support. Its better you can consult with any developer about this issue and close this post.

5 more replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
4 years ago

Hi,

Thanks for contacting us. Could you please give me your site URL so that I can try?

-Regards.

Laurent Asked this
4 years ago

see Hidden Content area.

Laurent Asked this
4 years ago

@Mehtaz Afsana Borsha any idea?

Mehtaz Afsana Borsha Staff
4 years ago

Its actually need customization support which is beyond our support policy. But I am trying to help you, I think this CSS may help you atleast give you a hint. You can try this CSS below:

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a{
        background-color: #8e60bc !important;
    border: 1px solid;
    border-radius: 15%;
}
Laurent Asked this
4 years ago

thanks for your help :)
I have tried and works with this code :

.sp-megamenu-parent > li > a:hover,
.sp-megamenu-parent > li > span:hover,
.sp-megamenu-parent>li.active>a,
.sp-megamenu-parent>li.active:hover>a {
    background-color: #fff;
    border-radius: 30px;
    height: 30px;
    display: flex;
    align-items: center;
}

but there is a strange behavior when hover effect on items.
the dropdown menu moves and we can see a square background too.
see this video : https://screencast-o-matic.com/watch/c3jXQDVZPtw

Log in to reply.