Here is a quick tutorial on how to make the ‘burger bar’ or ‘nav bar’ in the WordPress Theme OnePress, white rather than dark when there is a photo behind.

The problem I was having is that when the menu was transparent, the black nav bar icon would disappear into (be swallowed up by) the background.

burger-nav-bar

The following CSS rectifies this problem:


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


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


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


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


#nav-toggle span {
background: white;
}


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


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

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.

Related Post

Share this via:


SOCIAL MEDIA


Copyright © 2019 Digital Technology Labs Limited (Company No: 11577499) | Terms  | PrivacyCookies | Areas served
Web design Langdon Hills | Web design Basildon | Web design Essex