Need help to adopt hover funktion for steaky header

[Nina_Weigel]

I have added the language switcher to my different headers. 

The language list works fine with the "Header overlay".  But as soon as I scroll down and the "Steaky header" appears, the language list ist not clickable anymore (see img attached).

Screenshot

Can anybody give me some advice?

Website: https://www.salessation.com/en/

[Ebowling]

It looks like the the language list is only set to display when the cursor is hovering over the nav menu item, .globe_class:

.globe_class:hover .lang_list_class {display: block}

Try updating the CSS so the hover styles also apply with the cursor is hovering over the language list itself:

.lang_list_class:hover {display: block}

Let me know how that works!

[Nina_Weigel]

Hey!

Thanks so much for your answer. Unfortunetly I don`t know exactly where to update it. Could you have a look at my CSS? It looks like the following:

/* ==========================================================================
   Lang Select
   ========================================================================== */

.lang-select .lang_switcher_class {
    display: block;
}

.lang-select .globe_class {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    background: none;
    text-align: center;
}

.lang-select .globe_class:before {
    content: '\f0ac';
    font-family: FontAwesome;
    font-size: 16px;
}

.lang-select .lang_list_class {
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
    top: 30px;
    box-shadow: 0 8px 10px -2px rgba(0, 0, 0, 0.15), 0 20px 60px -10px rgba(0, 0, 0, .15);
    {{ radius(corners, "0", "4px", "6px") }}
    padding-top: 6px;
    visibility: none;
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-10px);
    transform: translateX(-50%) translateY(-10px);
    transition: .4s ease;
}

.lang-select .globe_class.open .lang_list_class {
    width: auto;
    height: auto;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
}

.lang-select .lang_list_class:before,
.lang-select .lang_list_class:after {
    display: block;
}

.lang-select .lang_list_class li {
    padding: 0 !important;
    background: none;
    font-size: 11px;
    line-height: 14px;
    border: none !important;
}

.lang-select .lang_list_class li a {
    display: block;
    width: 100px;
    padding: 8px 12px;
    background: {{ dropdown_background_color }};
    color: {{ dropdown_text_color }};
    text-align: left;
}

.lang-select .lang_list_class li:first-child a {
    position: relative;
    {{ radius(corners, "0", "0 0 4px 4px", "6px 6px 0 0") }}
}

.lang-select .lang_list_class li:last-child a {
    {{ radius(corners, "0", "4px 4px 0 0", "0 0 6px 6px") }}
}

.lang-select .lang_list_class li a:hover,
.lang-select .lang_list_class li a:active {
    display: block;
    background: {{ dropdown_hover_background_color }};
    color: {{ dropdown_hover_text_color }};
}

.lang-select .lang_list_class li:first-child a:before {
    content: '';
    display: block;
    border: 6px solid transparent;
    border-bottom-color: {{ dropdown_background_color }};
    position: absolute;
    top: -12px;
    left: 50%;
    margin-left: -6px;
    transition: .4s ease;
    pointer-events: none;
}

.lang-select .lang_list_class li:first-child a:hover:before {
    border-bottom-color: {{ dropdown_hover_background_color }};
}

.lang-select .lang_list_class li:first-child a {
    padding-right: 25px;
}

.lang-select .lang_list_class li:first-child a:after {
    content: '\f00c';
    font-family: FontAwesome;
    display: block;
    width: 10px;
    height: 14px;
    line-height: 11px;
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 8px;

Thanks so much in advance!!

Nina