Changing hover color on buttons in primary navigation menu

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 :)

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.

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;
}

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?

Try this:

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

Thanks, Ying!

No problem :)