Menu hover link not working

[logoglo]

Hi there, website is:

Food And Drink | C. Knight's Steakhouse | United States

I have this css:

.x-navbar .desktop .x-nav > li > a,
.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
color: white;
}
.x-navbar-scrolled .desktop .x-nav > li > a > span {
color: white;
}

.x-navbar-scrolled .desktop .x-nav > li > a > span:hover {
color: white;
}
.x-navbar-fixed-top-active .x-navbar-wrap {
margin-bottom: 0;
}
@media (min-width: 980px) {
.x-slider-container.below {
margin-top: -75px;
}
}

.x-main.full {

margin-top: -110px;

}
.x-navbar {
background: none;
border-bottom: none;
box-shadow: none;
}

And this Java:

jQuery(document).ready(function($){
$(’ .x-navbar-fixed-top’).css(“background-color”, “transparent”);
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$(’ .x-navbar-fixed-top’).css(“background-color”, “rgba(51,51,51,0.85)”).css(“transition”,"0.3s ease-in-out ");
} else if ($(this).scrollTop() > 300) {
$(’ .x-navbar-fixed-top’).css(“background-color”, “rgba(51,51,51,0.75)”).css(“transition”,"0.3s ease-in-out ");
} else if ($(this).scrollTop() > 200) {
$(’ .x-navbar-fixed-top’).css(“background-color”, “rgba(51,51,51,0.5)”).css(“transition”,"0.3s ease-in-out ");
} else if ($(this).scrollTop() > 100) {
$(’ .x-navbar-fixed-top’).css(“background-color”, “rgba(51,51,51,0.35)”).css(“transition”,"0.3s ease-in-out ");
} else {
$(’ .x-navbar-fixed-top’).css(“background-color”, “transparent”).css(“transition”,"0.3s ease-in-out ");
}

if ($(this).scrollTop() > 100) {
$(’ .x-navbar-fixed-top’).addClass(‘x-navbar-scrolled’);
} else {
$(’ .x-navbar-fixed-top’).removeClass(‘x-navbar-scrolled’);
}

});
});

To make the nav bar act like it is. The only thing is, the hover links are not changing color, normally you have the bar underneath that changes color, or the menu item changes color, but its not, can you help?

Also, on the mobile view, the menu disappears as you scroll down, how can I make it fixed?

Thanks.

[jade]

Hi there,

Your menu items does not change color because the initial color of the menu text is set to white and you have this code in the custom CSS:

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    -moz-box-shadow:   none;
    -webkit-box-shadow: none;
    box-shadow:         none;
       color: white;
}

Notice that this is the selector for the menu hover .x-navbar .desktop .x-nav > li > a:hover which is part of the code above where you set the text as white. Try removing the selector on the code and add this:

.x-navbar .desktop .x-nav > li > a:hover {
    color: #000;
}

Hope this helps.

[logoglo]

Worked perfectly! thanks!

[jade]

You’re welcome.