On my homepage (https://hellholenelson.com/) I am using a slider below the masthead.
I set the navbar to transparent.
Using CSS I moved the slider up so it is underneath the navbar.
.x-slider-container.below {
top: -90px;
}
And when the user starts to scroll down the page, the navbar background turns white.
.home .x-navbar.x-navbar-fixed-top {
background: #f5f2eb !important;
-webkit-transition: background-color 1400ms linear;
-ms-transition: background-color 1400ms linear;
transition: background-color 1400ms linear;
}
All of this is working perfectly.
But in the mobile layout, before the user has scrolled down, and while the navbar is still transparent, I have an issue.
If the user presses the hamburger icon and the mobile navigation menu drops down, it is also transparent and thus difficult to read.
This is because the mobile menu inherits the styling from the main navbar.
The only way I’ve been able to mitigate this so far is to set the background color on the li menu items:
#x-nav-wrap-mobile li.menu-item.menu-item-type-post_type.menu-item-object-page {
background: #f5f2eb;
padding: 0 20px;
width: 100%;
}
But this looks terribly hacky:
I am open to suggestions, but the only thing I can think of is to create some custom javascript.
Native functionality
Right now, when the hamburger menu is pressed, the theme’s native functionality is to toggle a class, so that:
<div id="x-nav-wrap-mobile" class="x-nav-wrap mobile x-collapsed">
becomes…
<div id="x-nav-wrap-mobile" class="x-nav-wrap mobile">
A potential fix
When the user presses the hamburger icon and x-collaped is toggled off, if another class could additionally be toggled on on an upstream element, it would enable me to style the entire navigation bar and mobile navigation all at the same time.
For example,
<div class="x-navbar">
would become…
<div class="x-navbar transparency-off">
And with a little CSS the entire navbar and mobile navigation would acquire a background color until the user presses the hamburger icon again:
.x-navbar.transparency-off {
background-color: #f5f2eb !important;
}
Unfortunately I don’t posses the requisite javascript skills to code this. I’m surprised no one has asked about this before, because I imagine it is an issue that has arisen for many of your customers in the past. Any tips would be greatly appreciated. 