Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2701738
custom hover vertical menu soledad theme
Closed

Comments

  •  3
    firosyd started the conversation
    February 24, 2021 at 6:19pm

    Hi there,

    I'm customizing the menu of the website done with Soledad.

    I'd like to change the color background hover menu item and not only to the color "a" link menu. I'm using border into menu. Follow the URL please.

    Is there any spot where I can customizing that in Customize or any code to apply with CSS? 

    Thanks a lot

    ----------------------------------------------------------------------------------------------------------------------------------------------------

    Hi there,

    I just got a CSS code for customizing the hover background item menu.

    Thank you

  •  2,700
    PenciDesign replied
    February 25, 2021 at 2:31am

    Hi,

    Yeah, I see you can do that for yourself now.

    But, I think you can replace your custom CSS code:

    .penci-menu-hbg .menu li a:hover {
    background-color: #f3bf1e;
}

    to this code:

    .penci-menu-hbg .menu li a{
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.penci-menu-hbg .menu li a:hover {
    background-color: #f3bf1e;
    padding-left: 10px;
    padding-right: 5px;
}

    It will look better.


    Best Regards,

    PenciDesign

  •  3
    firosyd replied
    February 25, 2021 at 11:38am

    Wow! Look better really! Thank you so much!

    What if I want an effect of kind "active item menu" as the visitor clicks in the link from the menu? 

    Thanks a lot!

  •  2,700
    PenciDesign replied
    February 25, 2021 at 1:01pm

    Hi,

    You can try to replace the code I sent to this code to apply that style for the current menu viewing item:

    .penci-menu-hbg .menu li a{
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.penci-menu-hbg .menu > li.current-menu-item > a,
.penci-menu-hbg .menu > li.current-menu-ancestor > a,
.penci-menu-hbg .menu li a:hover {
    background-color: #f3bf1e;
    padding-left: 10px;
    padding-right: 5px;
}

    Best Regards,

    PenciDesign

  •  3
    firosyd replied
    February 25, 2021 at 1:24pm

    It's working better! 

    Thanks in advance.

    Best regards 

  •   PenciDesign replied privately
  •   firosyd replied privately