- This topic has 10 replies, 4 voices, and was last updated 5 years, 10 months ago by David.
-
AuthorPosts
-
May 30, 2018 at 4:33 pm #588320Shane
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.
May 30, 2018 at 4:37 pm #588323ShaneSorry – 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.
May 30, 2018 at 8:52 pm #588405TomLead DeveloperLead DeveloperIt 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 🙂
May 31, 2018 at 5:44 am #588667ShaneI’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):
May 31, 2018 at 6:04 am #588684SridharWouldn’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?
May 31, 2018 at 6:30 am #588705DavidStaffCustomer SupportHi 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; }
May 31, 2018 at 6:30 am #588706SridharA 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; }
May 31, 2018 at 6:32 am #588708SridharIt 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; }
May 31, 2018 at 6:42 am #588714DavidStaffCustomer SupportNice Sridhar, yes of course the nav background is already transparent so that’s cool.
May 31, 2018 at 7:21 am #588749ShaneThat 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.
May 31, 2018 at 7:30 am #588757DavidStaffCustomer SupportYes fortunately the Search bar precedes the navigation. Glad you got it fixed.
-
AuthorPosts
- You must be logged in to reply to this topic.