Menu icon 'hamburger' doesn't show in browser dark mode


DV1

Joined
May 22, 2022
Messages
1
Reaction score
0
Hi to All

I'm wondering if anyone here has come across the problem of a hamburger icon (menu) not showing when in browser dark mode. The icon is there, hover over it and the menu shows, but it's not visible.

Any suggestions appreciated.

Here's the code from the menu css which is the icon:


Code:
.header a {
    display: block;
    width: 28px;
    height: 18px;
    padding: 11px;
    margin: 1.9em;
    position: absolute;
    top: 0;
    left: 0;
}

.header a:before,
.header a:after {
    content: '';
    display: block;
    background: rgba(0, 0, 0, 1);
    height: 2px;
}

.header a span {
    background: rgba(153, 0, 0, 1);
    display: block;
    height: 3px;
    margin: 6px 0;
width: 19px;
}
 
Ad

Advertisements

Joined
Nov 13, 2020
Messages
141
Reaction score
23
JS can tell you if the browser is in dark mode and change the color of the menu. To detect dark mode use:
window.matchMedia()
See the entire code block HERE:
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top