[Resolved] Sub-menu hover on sticky navigation

[Dominik]

Hi there,

we use a hover effect on the sub-menu wich works well…until you scroll down and the menu is getting sticky.
Then the added svg arrow isn´t shown anymore.

.sub-menu  a:hover::after{
        background-image:url('data:image/svg+xml;charset=UTF-8,<svg id="i-ccl-arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106.5 13"><polygon fill="rgba(255,255,255,1)" points="96.23 13 96.23 7.35 0 7.35 0 5.64 96.23 5.64 96.23 0 106.55 6.5 96.23 13"/></svg>') !important;
        background-repeat: no-repeat !important;
        width: 54px !important;
        height: 10px !important;        
        margin-left: 14px !important;
        display: inline-block!important; 
    }
    

Here is a link to the dev page: https://ccl.brandwerk-digital.com/it-services
Thanks for you help and best wishes

[Elvin]

Hi,

This is the one causing the issue: https://share.getcloudapp.com/yAulpBmE

I believe “brandwerk” is a child theme? It’s style.css has this code that prevents your hover arrow from displaying:

@media screen and (min-width: 993px){
#sticky-navigation .main-nav ul li a:after {
    height: 0 !important; 
}
}

Removing this should fix the issue.

[Dominik]

Hi Elvin,

that´s it! Thank you very much.

[Elvin]

No problem. Glad to be of any help. 😀

[Author]

Posts