Menu names in colored blocks

In your Child Theme or CSS Editor Plugin try this code:

#mainnav {
    padding: 1em 2em;
    background: transparent -moz-linear-gradient(center bottom , #D2BD2F 0%, #DBCA59 100%) repeat scroll 0% 0%;
    border-width: 1px;
    border-style: solid;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    border-color: #C7B22B #BEAB29 #B29F27;
    color: #000 !important;
    border-radius: 0.25em;
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.067);
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
}

*Note
If your theme has a custom CSS Editor in it, you can also paste the code in there.

Never edit core CSS or PHP files under Appearance > Editor. Your edits will be deleted when the theme is updated.

Then I would add this for the sticky nav background

.site-header.float-header {
    background-color: rgba(219, 202, 89, 0.9);
}

I put that into TJ Custom CSS and nothing changed.

#mainnav {
padding: 1em 2em;
background: transparent -moz-linear-gradient(center bottom , #D2BD2F 0%, #DBCA59 100%) repeat scroll 0% 0%;
border-width: 1px;
border-style: solid;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
border-color: #C7B22B #BEAB29 #B29F27;
color: #000 !important;
border-radius: 0.25em;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.067);
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
}

Along with
.site-header.float-header {
background-color: rgba(219, 202, 89, 0.9);
}

In customize, header type:

If I

select the header type for all pages except the front page as image

the floating header works. If I

select Site header type no header only

menu, it does not work.

new.bluegrassusa.net This front page works just fine.

This page, https://new.bluegrassusa.net/clubs-jams/ only floats the header menu when the image is selected.

I had to add a plugin to get the menu to float.

The code to “box” the menu worked on the complete menu string. I was thinking of blocking each menu item individually. Is there away?