Hamburger Color On Hover

  • Resolved yuratea

    (@yuratea)


    3 years, 1 month ago

    Hi,
    I would like to change Hamburger icon colour on hover. The hamburger goes dark gray on hover (it was set like this from the start), but I wish it to go white on hover.
    I’m using free OceanWP. In Mobile Menu Customising Settings it is possible to change the hamburger colour, but not the colour on hover. Maybe it could be done using Custom CSS? Do you know how to do it?

    I tried to write some Custom CSS code although I don’t know much about it.

    I found two solutions, but they aren’t perfect. Maybe you know a better way?
    I couldn’t make go away the gray overlay shadow set initially from the start, but the white color is visible through it.
    1.:

    
.hamburger-inner:hover:before{
background-color: white !important;
}

.hamburger-inner:hover:after{
background-color: white !important;
}

.hamburger-inner:hover{
background-color: white !important;
}

    2.:
    Here I used CSS filter brightness. It is OK, but not so good as changing the colour of the icon could be.

    
.mobile-menu:hover{
filter: brightness(300%); !important;
}
    • This topic was modified 3 years, 1 month ago by yuratea.
    • This topic was modified 3 years, 1 month ago by yuratea.
Viewing 5 replies - 1 through 5 (of 5 total)

  • Hello @yuratea,

    Please share a live URL from your issue.

    Also, you can use this custom CSS code:

    #wrap .mobile-menu:hover {
    color: #fff;
}

#wrap .mobile-menu:hover .hamburger .hamburger-inner:before {
    background-color: #fff !important;
}

#wrap .mobile-menu:hover .hamburger .hamburger-inner:after {
    background-color: #fff !important;
}

#wrap .mobile-menu:hover .hamburger .hamburger-inner {
    background-color: #fff !important;
}

    Note: You can use the wapper ID to set CSS stronger. For example, in OceanWP theme, the page ID is #wrap.

    Best Regards

    Thread Starter yuratea

    (@yuratea)

    Thank you for your reply. I pasted your code in Custom CSS.
    Here is the live URL (I’m still working on the first page ?? ):
    https://molinukas.000webhostapp.com/

    Hello @yuratea,

    So can you confirm your issue has been resolved?

    Best Regards

    Thread Starter yuratea

    (@yuratea)

    My issue has been resolved!
    Best regards ??

    You’re most welcome.
    I’m glad it is solved.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Hamburger Color On Hover’ is closed to new replies.