I’m working on creating a website and I’m having a difficulty that seems to be an easy solution.

I would like to customize the Site Menu so that it has colors in each of the elements contained in this Menu. As in the example of this site: http://alliate.com.br/

The “Portal do Cliente” item has color when the mouse is not in the element and also when it is in the element. And I would like to do just that.

I searched the documentation and topics listed here to do such an action and found the helper class: boc_nav_button – which I applied to the site I’m creating that is http://www.ipacriacao.com.br

This class partially answered me because I would like the element to have the inverse effect, that is, when the mouse is NOT POINTED the element will appear with a colored background and white color, and when the elemento IS WITH THE MOUSE POINTED, the element appears with white background and blue fountain.

How to perform such customization by kindness?

I hope you have understood, but any difficulty is enough that please inform me that I send more details.

I look forward to your response and thank you in advance!

I wish you a great week!

Greetings,

João Victor

First off, instead of having an input button in the navigation you can apply the “boc_nav_button” class to the regular menu item just like in the second link you sent and that will create a link with a button styling. Now to inverse the style (solid button and white background with border on hover) you can do the following in your Theme options->Custom styles or your child theme’s css file:

#menu > ul > li.boc_nav_button a {
    background: #1e73be;
    border: 2px solid #1e73be;
    color: #fff !important
}
#menu > ul > li.boc_nav_button a:hover {
    background: #fff!important;
    color: #1e73be;
    border: 2px solid #1e73be;
}

Let me know if that does it for you.

I was able to make the desired change according to the CSS personalization sent by you, however, I had to make a small change in the code, inserting the term “important” in color when a: hover.

Demonstra next:

 #menu> ul> li.boc_nav_button a: hover {
    background: #fff! important;
    border: 2px solid # 1e73be;
    color: # 1e73be! important;
    font-weight: 8px;
}

Above all, I was able to perform the procedure.

I would like to express my sincere thanks.

I wish you a great Wednesday! See you next time, my friend!

Greetings,

João Victor