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

DV1

Joined
May 22, 2022
Messages
6
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;
}
 
Joined
Nov 13, 2020
Messages
302
Reaction score
38
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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top