Nav Menu Color when mouse hovers sub menu

  • Hi Weblizar_Support,

    Pardon me but I’ve gone through every support thread involving the nav menu. In which many of them say resolved. After experimenting with the many solutions, I’ve only kept the following:

    .navbar-default .navbar-nav > li a {
    color: #ffffff;
    background: #4c0c54;
    font-family: Open Sans, sans-serif;
    box-shadow: 3px 3px 3px #4c0c54;
    -webkit-box-shadow: 3px 3px 0 #81d742;
    -moz-box-shadow: 3px 3px 0 #000000;
    }
    .navbar-default .navbar-nav > li a:hover {
    color: #ffffff;
    background: #81d742;
    font-family: Open Sans, sans-serif;
    box-shadow: 3px 3px 3px #4c0c54;
    -webkit-box-shadow: 3px 3px 0 #4c0c54;
    -moz-box-shadow: 3px 3px 0 #000000;
    }
    These are the only ones seeming to have any effect at all.

    By default everything is showing perfectly EXCEPT THE ACTIVE HOME BUTTON (BLUE) and when I HOVER THE MOUSE OVER THE SUBMENU, however, THE PRIMARY NAV MENU DEFAULTS BACK TO BLUE.

    Is there something I’m missing or another solution? Please help!

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi,

    Please use below CSS

    .navbar-default .navbar-nav > li a {
color: #ffffff;
background: #4c0c54;
font-family: Open Sans, sans-serif;
box-shadow: 3px 3px 3px #4c0c54;
-webkit-box-shadow: 3px 3px 0 #81d742;
-moz-box-shadow: 3px 3px 0 #000000;
}
.navbar-default .navbar-nav > li a:hover {
color: #ffffff;
background: #81d742;
font-family: Open Sans, sans-serif;
box-shadow: 3px 3px 3px #4c0c54;
-webkit-box-shadow: 3px 3px 0 #4c0c54;
-moz-box-shadow: 3px 3px 0 #000000;
}
.navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
a.dropdown-toggle:hover,
.open a.dropdown-toggle {
background: #81d742 !important;
}

    Thanks.

    Thread Starter kfranklin

    (@kfranklin)

    Ok. Please check my website https://www.merrymen.info.

    It did fix the active button issue but it is still defaulting back to the blue only on the top of the dropdown menus.

    Is there something else that may be overriding this command?

    Hi,

    Please use below CSS instead

    .navbar-default .navbar-nav > li a {
color: #ffffff  !important;
background: #4c0c54 !important;
font-family: Open Sans, sans-serif;
box-shadow: 3px 3px 3px #4c0c54;
-webkit-box-shadow: 3px 3px 0 #81d742;
-moz-box-shadow: 3px 3px 0 #000000;
}
.navbar-default .navbar-nav > li a:hover {
color: #ffffff  !important;
background: #81d742 !important;
font-family: Open Sans, sans-serif;
box-shadow: 3px 3px 3px #4c0c54;
-webkit-box-shadow: 3px 3px 0 #4c0c54;
-moz-box-shadow: 3px 3px 0 #000000;
}
.navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
a.dropdown-toggle:hover,
.open a.dropdown-toggle {
background: #81d742 !important;
}

    Thanks.

    Thread Starter kfranklin

    (@kfranklin)

    Cheers to Weblizar_support! That one worked out great. And I also agree with everyone else. This is a great theme!

    Hi,

    Most Welcome.

    Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Nav Menu Color when mouse hovers sub menu’ is closed to new replies.

Tags