Background Hover On Menu Item - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Background Hover On Menu Item

Laurent

Laurent

Helix Framework 3 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.

0
6 Answers
Order by
Oldest Newest Votes
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #79565

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

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #79226

Hi,

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

-Regards.

0
Laurent
Laurent
Accepted Answer
3 years ago #79227

see Hidden Content area.

0
Laurent
Laurent
Accepted Answer
3 years ago #79365

@Mehtaz Afsana Borsha any idea?

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #79377

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%;
}
0
Laurent
Laurent
Accepted Answer
3 years ago #79383

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

0