Change the hovering effect of wpbakery Sidebar widget

This topic has 7 replies, 3 voices, and was last updated 5 years, 1 months ago ago by Dox

  • Avatar: Usman Shahzad
    Dox
    Participant
    October 21, 2020 at 21:01

    I want to change the hovering effect of sidebar product categories widget created by WpBakery builder.

    Please have a look:

    https://ibb.co/5cWLP7C

    6 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 22, 2020 at 06:57

    Hello,

    Please describe the desired result in more detail.

    Regards

    Avatar: Usman Shahzad
    Dox
    Participant
    October 23, 2020 at 01:13

    Dear, I want to have hover menu effects on Product category widget like the one I am getting on dropdown menu. Please take a look at the pic in order to have a better understanding of the issue:

    https://ibb.co/bg5gVbV

    Avatar: Olga Barlow
    Olga Barlow
    Participant
    October 23, 2020 at 11:07

    Hello,

    Add the below custom code

    .categories-menu-element .cat-item a {
        width: auto;
        display: inline-flex;
        position: relative;
        padding-top: 0;
        padding-bottom: 3px;
        border: none;
    }
    .categories-menu-element .cat-item a:before {
        content: '';
        height: 2px;
        width: 0;
        right: 0;
        position: absolute;
        transition: width .2s ease-in-out;
        bottom: 0;
        background-color: #6aa6cb;
    }
    .categories-menu-element .cat-item a:hover:before {
        width: 100%;
        left: 0;
        right: auto;
    }
    .categories-menu-element .cat-item {
        border-bottom: 1px solid #e6e6e6;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    Regards

    Avatar: Usman Shahzad
    Dox
    Participant
    October 23, 2020 at 17:40

    Hi, thanks for the code. But the code works in half, the underline works perfect, but the color of the menu is not changing with hovering. Please have a look at this pic:

    https://ibb.co/bssDXGW

    Please provide the code to change the hovering color of the menu . . .

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 24, 2020 at 08:53

    Hi,

    .categories-menu-element .cat-item a:hover {
        color: #6aa6cb;
    }

    Regards

    Avatar: Usman Shahzad
    Dox
    Participant
    October 24, 2020 at 17:19

    Hi,

    This time the code works perfectly and as expected.

    Thanks for solving the issue 🙂

    Regards,

  • Viewing 7 results - 1 through 7 (of 7 total)

The issue related to '‘Change the hovering effect of wpbakery Sidebar widget’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.