We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

CSS to change color of menu button

April 20, 2022 at 8:43 pm #7338
[anonymous]
I’ve got my website mostly done but there is one last hiccup I can’t figure out. In mobile mode only the menu button in the top right is white on white on white, making it impossible to see, but I can click it. I can’t find a them setting to change it, so can anyone give me some CSS pointers to change the color? Everything is fine in the desktop version and I’m able to change the header color as follows:
```
header.top {
  background: #FFF;
```
Any help appreciated

S
April 21, 2022 at 4:43 am #7340

[anonymous]

What’s the url of your website? Which theme are you using? Does the demo of the theme have the same issues?

April 21, 2022 at 10:09 pm #7343

[anonymous]

The URL is haltonmechanical.ca The theme is the “Simple” theme, and the demo doesn’t have issues. I have another website using the same theme that works fine. But the issue with this one is the color, other than that the menu can be clicked.

S

April 21, 2022 at 11:21 pm #7344

[anonymous]

That menu icon is built in CSS. I checked the source and see some inconsistencies with the source urls. Some have http and triple slashes in the urls. The CSS source has this url – http:///haltonmechanical.ca/assets/css/style.css?v=fce37bd7ff3ba28addd74eaa47dea58c. Although browsers tend to correct this and redirect to correct source, I suspect you are not seeing the menu icon and the top arrow at the bottom of the page in mobile view because of this. I might be wrong though but correcting these malformed urls would be a start.

April 24, 2022 at 2:36 pm #7349
[anonymous]
Thanks for the tips @thumb,

I fixed all the urls as suggested. It did not fix the button color, but I was able to do that in CSS using the following:
```
.navbar .navbar__toggle {
    background: #888889;
}
```
Appreciate your help!
April 25, 2022 at 5:09 pm #7359

[anonymous]

There’s one more change I would suggest. Have a look at this:

The SVG map is being loaded from http:// and that’s causing this error. Your domain is on https. Having the urls on https:// will mitigate this. After that, the top arrow SVG at the bottom of the page should be visible. This SVG fix is absolutely necessary (along with making all http as https)

I understand that you wanted the top background as white to align with the logo. I have two alternatives in mind.

I removed the white background in the logo with an online tool. This should blend the logo with any background image without having to use any workaround for other elements color on the page.

The second alternative is to make the menu button lines as black or any other color of your choice. The class to edit is this:

The ‘black’ is what I added. It would be #FFF for you.