Topic: Hamburger menu background defaults to gray when using the Navigation block

steve31266
January 16, 2026 at 5:44 pm
Using the new Navigation block, I notice that the hamburger menu background is colored dark gray (#55555e). I want the hamburger menu background to be transparent so that the header background CSS color effects show through.

I adjusted the “Menu Toggle” background colors by deleting the color in the Navigation Block settings. But no luck. However, if I choose an actual color for the Menu Toggle, the hamburger background color changes. It just wants to change my transparent setting to dark gray.

Looking at the CSS in the browser tools, I see that color is coming from main.min.css…
```
button, input[type="button"], input[type="reset"], input[type="submit"] {
  background: #55555e;
  color: #fff;
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-appearance: button;
  padding: 10px 20px;
```
The only way to get a transparent on the hamburger menu background is to set a color on the Menu Toggle background, and then slide the opacity all the way to 0, then save. Otherwise, deleting the color entirely forces the hamburger menu background to pick up the background from main.min.css.

QUESTION: What is the standard practice for setting a transparent color throughout all of GP/GB? Is it to delete the color entirely, or choose any color and set its opacity to 0?
George
January 17, 2026 at 7:24 am

Hello. Since the toggle icon is actually a button its color is inherited from Customizer -> Colors -> Buttons. So you can either set you button colors globally from there, or, as you mentioned, select a color and set its transparency to 0. This will override the button color settings as it is a more specific selector.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Hamburger menu background defaults to gray when using the Navigation block