It took a while to find the hooks to find the span, related to the nav-toggle. I needed to find a way to make the ‘burger bar’ visible whether the background image was light or dark. The most tricky part was fixing the middle bar – to not appear when the nav bar is white and the menu is expanded. I couldn’t get the before and after to be different colours. I finally managed to resolve this by identifying the class ‘nav-is-visible’ and eventually this enabled me to colour the before and after states, black and transparent.

Update!

.header-transparent #nav-toggle span:before {
background: white;
}

.header-fixed #nav-toggle span:before {
background: black;
}

.header-transparent #nav-toggle span:after {
background: white;
}

.header-fixed #nav-toggle span:after {
background: black;
}

.header-transparent #nav-toggle span {
background: white;
}

.site-header.header-fixed #nav-toggle span {
background: black;
}

.nav-is-visible span {
background: transparent !important;
}

Note I needed to add in a style .header-transparent, to cope with some the scenarios when the header is not transparent.