[Resolved] Changing hover color on buttons in primary navigation menu

[Roger]

I have two buttons in my navigation menu, a green “DONATE” and a brown “APPLY” which you can see here https://alternateg1stg.wpengine.com/

When I hover over them, the green and brown colors turn transparent when I would prefer that they each turn to a slightly darker color (darker green and darker brown).

Can you tell me what code I would need to add/modify and where to achieve that?

Thank you.

[Leo]

Hi Roger,

Go to the Additional CSS field in the customizer and edit these two snippets:

.main-navigation:not(.slideout-navigation) .main-nav li.online-button a {
  background-color:#56BD60;
color: #ffffff;
  border: 3px solid #FFFFFF; /* White */
  line-height: 40px;
	padding: 0px 24px;
  border-radius: 20px;
  margin-left: 20px;
  transition: all 0.5s ease 0s;
}

.main-navigation:not(.slideout-navigation) .main-nav li.online-button a:hover {
  background-color:rgba(178,139,178,0.8);
color: #ffffff;
  transition: all 0.5s ease 0s;
}

/* studio classes menu button */

.main-navigation:not(.slideout-navigation) .main-nav li.studio-button a {
  background-color:#8C7051;
color: #ffffff;
  border: 3px solid #FFFFFF; /* White */
  line-height: 40px;
	padding: 0px 24px;
  border-radius: 20px;
  margin-left: 30px;
  transition: all 0.5s ease 0s;
}

.main-navigation:not(.slideout-navigation) .main-nav li.studio-button a:hover {
  background-color: rgba(132,140,183,0.8);
color: #ffffff;
  transition: all 0.5s ease 0s;
}

Let me know if this helps 🙂

[Roger]

Thanks for this info. Unfortunately, when I edit the hover cover for the buttons, it’s still not working as I want, i.e. it’s still going transparent. You can see for yourself here: https://alternateg1stg.wpengine.com/

I’m using the merge element sitewide. Does that have some impact on the CSS code for the primary navigation? I ask because the background cover hover on the buttons seems to work properly when I’m not using the merge.

[Ying]

Hi Roger,

Yes, the merged header adds some CSS to override your CSS.

Try add !important to your CSS and switch the hover state to the li element instead of a, for example:

.main-navigation:not(.slideout-navigation) .main-nav li.online-button:hover a {
  background-color:rgba(178,139,178,0.8) !important;
color: #ffffff !important;
  transition: all 0.5s ease 0s;
}

.main-navigation:not(.slideout-navigation) .main-nav li.studio-button:hover a {
  background-color: rgba(132,140,183,0.8) !important;
color: #ffffff !important;
  transition: all 0.5s ease 0s;
}

[Roger]

Thanks, Ying. I tackled that one.

I want to do the same thing (change the hover cover) for the “join” button in the footer widget. Can you tell me what css I need for that one?

[Ying]

Try this:

.site-footer aside#text-8 button:hover {
    background-color: red;
}

[Roger]

Thanks, Ying!

[Ying]

No problem 🙂

[Author]

Posts