Changing Color of "Menu" Icon When Moused Over

  • Resolved wittyoctopus

    (@wittyoctopus)


    11 years, 3 months ago

    Ok, thanks to some digging around and some earlier help I was able to modify the color and shading of the “Menu” icon, (the icon that appears when the website responsively shrinks to “iPad/iPhone” size in place of the navigation menu.) However, I’ve struggled to find what code I would need to modify in order to change the color of the same icon when the mouse crosses over the icon, or when the icon has been “depressed.” Any help that y’all could provide would be appreciated.

    Also here is the code that I changed for the “Menu” button.

    .navbar .btn-navbar {
    background-color: #0067C6;
    background-image: none;
    background-repeat: repeat-x;
    border-color: none;
    box-shadow: none;
    color: white;
    float: right;
    margin-left: 5px;
    margin-right: 5px;
    padding: 7px 10px;
    text-shadow: none;
}
Viewing 2 replies - 1 through 2 (of 2 total)

  • Change this to color you want:

    .navbar .btn-navbar:hover,
.navbar .btn-navbar:focus,
.navbar .btn-navbar:active,
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] {
  background-color: #005580;
}

    Thread Starter wittyoctopus

    (@wittyoctopus)

    Brilliant, works as advertised, thanks! Y’all have made this theme and learning how to work around in CSS much more manageable. I have never experienced such great community support before.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Changing Color of "Menu" Icon When Moused Over’ is closed to new replies.