[Resolved] Feature Request: seach-active class on nav element

Home Forums Support [Resolved] Feature Request: seach-active class on nav element

Home Forums Support Feature Request: seach-active class on nav element

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #588320
    Shane

    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.

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #588323
    Shane

    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.

    #588405
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #588667
    Shane

    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):
    Menu Bar
    Search Bar

    #588684
    Sridhar

    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?

    #588705
    David
    Staff
    Customer Support

    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;
    }
    #588706
    Sridhar

    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;
    }
    #588708
    Sridhar

    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;
    }
    #588714
    David
    Staff
    Customer Support

    Nice Sridhar, yes of course the nav background is already transparent so that’s cool.

    #588749
    Shane

    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.

    #588757
    David
    Staff
    Customer Support

    Yes fortunately the Search bar precedes the navigation. Glad you got it fixed.

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.