Change Hover color in navbar menu

  • Resolved cayindustries

    (@cayindustries)


    9 years, 2 months ago

    How can I change this color from the original to rgba(0, 6, 102, 1)? I would only like to change to this color when hovering and clicking otherwise it should remain the same as in the navbar.

    Thanks.

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

  • Hi,

    Please add below CSS in Custom CSS editor.

    .navbar-default .navbar-nav .current_page_item > a, .navbar-default .navbar-nav > li:hover a, .navbar-default .navbar-nav > li:focus a {
  background-color: rgba(0, 6, 102, 1) !important;
  color: #fff !important;
}

    Save the changes.

    Thanks.

    Thread Starter cayindustries

    (@cayindustries)

    That worked, but my home button is constantly illuminated like it is hovering. I would like it to only illuminate when hovering.

    Also, is there a way to shrink the navbar itself so there is no gray area when hovering like there is currently.

    Here is the site: https://www.thesocketroll.com

    Thanks!

    Hi,

    Please use below CSS instead of above CSS

    .navbar-default .navbar-nav li:hover a, .navbar-default .navbar-nav li:focus a {
  background-color: rgba(0, 6, 102, 1) !important;
  color: #fff !important;
}
.navbar-default .navbar-nav .current_page_item a{
 background-color: transparent !important;
}

    Save the changes.

    Thanks.

    Thread Starter cayindustries

    (@cayindustries)

    That Worked! Thanks!

    Most welcome.

    Thanks.

    Thread Starter cayindustries

    (@cayindustries)

    Resolved!

    nice

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Change Hover color in navbar menu’ is closed to new replies.