I added a button to the main navigation “Contact Us”. The hover fills the button with the desired color. Everything looks good in the transparent header.

The issue comes in when I hover over the button after scrolling. The button text color changes to match rest of the menu but when I hover over the button, it gets rid of the border and button text color changes to white. How can i fix that?

Thank you

Let me see your URL please.

I think the reason is the combination of colors/hover colors you have defined in your header/transparent header configuration + the custom menu style you are using.
No problem it would be an easy fix with a few lines of CSS, the easiest way would be for me to see the actual scenario in action though, so share your URL please.
IF working locally please let me have your color/hover selections for header/subheader + menu style. Also the button classes you are using.
Thanks!

Transparent background:

Transparent Header Background Color – set to white
Transparent Header Main Navigation Text Color – set to white
Transparent Header Main Navigation Hover Text Color – set to white

Main Navigation:

Main Navigation Text Color (Top level items only) – default
Main Navigation Hover Text Color (Top level items only) – default

I have already tried multiple combinations and it does not seem to fix the issue. The button text color on hover seems to be the issue. Using css class “boc_nav_button” for the button in the main navigation menu

Can you provide me with the css code so that the button can have a color fill regardless of it being in transparent or main navigation? I really appreciate your assistance on this.

First off edit your style.css file and replace this:

header.transparent_header .custom_menu_6 #menu > ul > li:hover > a {

with this:

header.transparent_header .custom_menu_6 #menu > ul > li:not(.boc_nav_button):hover > a {

at this point the glitch should be removed, let me know if the colors are the way they should be.