Archived topic
Feature Request: seach-active class on nav element
10 replies · Started by Shane on May 30, 2018
I'm building a site for a client and I'd like to have a search-active class (or similar) added to the main nav element when the search field is active so that I can hide the menu items when the search is active. Right now, only the search <li> and the search <input> get active classes, so you can't target the other menu <li>'s with CSS.
To do this, you can just add nav.classList.remove( 'nav-search-active' ); on line 34 of navigation-search.js, and nav.classList.add( 'nav-search-active' ); on line 45. I've done it on my install for now, but don't want it to break with theme updates (and other people might want this ability).
With this, I can now have a CSS rule such as nav.nav-search-active .main-nav > ul > li { opacity: 0; } to hide nav elements when the search is active.
Sorry - tags got stripped. Here's the sentence again.
Right now, only the search li's and the search <input> get active classes, so you can't target the other menu li's with CSS.
It might be easier to just make the navigation search a solid color:
.navigation-search input {
opacity: 1;
}Let me know if that doesn't work for you :)
I'd like to have a semi-transparent background on the input (and menu) so the header image partly shows through. With the standard code, I can't partly show the header image without showing the menu items through too - that's why I want this change.
See images for example of what I want (and can only achieve with the JS modification):
Wouldn't the x icon of the search box also not disappear if you manage to get the class added to nav since it is inside the nav?
Hi Shane, Sridhar is correct on that point, however may be doable with just CSS, give this a try:
.nav-search-active ~ .main-nav .menu {
visibility: hidden;
}
.nav-search-active ~ .main-nav .menu .search-item {
visibility: visible;
}A little long-winded but this CSS will do what you want:
.nav-search-active + .mobile-bar-items + .menu-toggle + .main-nav ul > li:not(.search-item) {
opacity: 0;
}It has been so years since I saw the ~ operator in CSS that I forgot about it.
So here's a better way, thanks to David:
.nav-search-active ~ .main-nav ul > li:not(.search-item) {
opacity: 0;
}Nice Sridhar, yes of course the nav background is already transparent so that's cool.
That does the trick - thanks. I threw out sibling relationships because you can't go backward and I was only thinking of the search li item.
Yes fortunately the Search bar precedes the navigation. Glad you got it fixed.
