Hi @merettekuijt,
It looks like the button and its text is white on your site, though the following CSS should help with that:
button.menu-toggle {
border-color: #a0a0a0;
color: #a0a0a0;
}
.menu-toggle:focus:hover {
color: #ffffff;
}
Hope that helps!
Thread Starter
mer
(@merettekuijt)
Thank you @metabreakr!
Unfortunately the code does not make the menu button visible for mobile.
It seems better on the hover, but still does not appear without hovering over the place where the button should be.
Hi there,
Try this instead:
button#menu-toggle.menu-toggle {
color: black;
}
button#menu-toggle.menu-toggle:hover {
color: grey;
}
Replace the colour values with what you want them to be.
If you don’t want anything to happen on hover (which doesn’t really work on mobile anyway, as you don’t have a mouse pointer), you can even leave out the second declaration completely and it should still work.
Thread Starter
mer
(@merettekuijt)
Hi,
Thank you so much.
Unfortunately I do not see a change when viewing on my mobile and I still don’t see the menu button displayed.
I checked your site’s stylesheets that are loading in the browser using the browser dev tools, and just above the code we’ve given you here, you have this:
.wp-block-latest-posts__post-excerpt {
color: #000;
That CSS declaration is missing the closing }, so nothing you add to custom CSS after that will work. Add in the missing }, and the code following that will start to work. In other words, your code should look like this:
.wp-block-latest-posts__post-excerpt {
color: #000;
}
button#menu-toggle.menu-toggle {
color: black;
}
button#menu-toggle.menu-toggle:hover {
color: grey;
}
Thread Starter
mer
(@merettekuijt)
Thank you so much! That was indeed the issue.
Works lovely now!
