Transparent nav at merged header is overwriting my simple css hover color?

Hi Mitch,

Nice site!

I'm not quite sure what you meant and wanting to achieve..
Currently I see the red menu item (Try PE Perfect) goes to transparent when hover, and the 3 other menu items are transparent throughout.
Can you tell me what CSS you've added and what you would like the end result to be?

Thanks! The forum has been a huge help so far.

If you scroll down to see the sticky menu, the red color on Try PE Perfect should change on hover. I want the same thing to happen in the transparent menu for that item only.

The CSS for that button is:

.main-navigation .main-nav ul li.my-course-button a {
color: #ffffff;
background-color: #d9232e;
}

.main-navigation .main-nav ul .my-course-button.current-menu-item > a,
.main-navigation .main-nav ul .my-course-button.current-menu-parent > a,
.main-navigation .main-nav ul .my-course-button.current-menu-ancestor > a {
color: #ffffff;
background-color: #d9232e;
}
.main-navigation .main-nav ul li.my-course-button > a:hover,
.main-navigation .main-nav ul li.my-course-button.sfHover > a {
color: #ffffff;
background-color: #C11F2A;
}

I take that back....I would like it to be more like a button, but I couldn't figure out how to do it.

Kind of like the sign up button on http://www.clickminded.com

Give GP's button class a shot: https://docs.generatepress.com/article/adding-buttons/

Let me know.

What I would do is set !important after your custom color background colors (hover and current).

GP is setting them to transparent like the rest of the menu items, adding !important will make sure GP doesn't do that.

Great help! Thanks! Check out the results: http://www.peperfect.com/

One last touch up...I want to exclude the mobile menu from this code. I tried .main-navigation:not(.mobile-menu) with no luck. wrong operator?

Try wrapping your CSS in this:

@media (min-width:769px) {
    /* CSS Here */
}

Let me know.

Worked great. Thanks guys!

Glad we can help!