[Resolved] always show search box (make it show without having to click icon)

Home Forums Support always show search box (make it show without having to click icon)

This topic contains 5 replies, has 4 voices, and was last updated by  Tom 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1245869

    maggew

    May you please share function / snippet to “always show” search box without having to click the icon? Perhaps remove the icon all together too. I just think it would be great for visitors to have one less click to worry about 😉

    <li class="search-item"><a aria-label="Open Search Bar" href="#"></a></li>

    If something like this isn’t easily achieved with minimal effort, no worries. I tried searching the site before posting but it’s becoming very hard to use the search box, the displayed data is not always relevant / easy to read. So I did a search query with Duckduckgo and still didn’t have any success.

    https://duckduckgo.com/?q=site%3Ageneratepress.com+always+display+search+box

    #1246910

    Tom Lead Developer

    Hi there,

    Wouldn’t this make it so your other menu items couldn’t be clicked? Or would you want the search box to appear below the navigation?

    Let me know 🙂

    #1247146

    maggew

    Like this: https://i.imgur.com/sJU849A.png

    You know, I might have better success with just finding out how to add a search box with in GP Hook. https://developer.wordpress.org/reference/functions/get_search_form/

    I thought it would make sense to just use what was already there… but maybe not.

    #1247216

    David Customer Support

    Hi there,

    you can add a search form to the inside_navigation hook using this function:

    add_action( 'generate_inside_navigation','db_navigation_search' );  
    
    function db_navigation_search() { ?> 
        <form role="search" method="get" id="searchform"
        class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <div>
            <label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label' ); ?></label>
            <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" />
            <input type="submit" id="searchsubmit"
                value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" />
        </div>
    </form>
    <?php }

    Alternatively you can use a Hook Element and just add the HTML within that function.

    Then some CSS to align it to the right of the menu:

    .inside-navigation {
        display: flex;
    }
    
    .inside-navigation form {
        order: 5;
    }
    #1256777

    Marcel

    Hello,

    I have implemented the code snippet on an Element Hook, as described by David here.
    How to move the search box on the desired position inside the navigation?
    Image attached.

    Thank you!

    Marcel

    #1256979

    Tom Lead Developer

    Any chance you can link us to your site so we can give you specific CSS?

    Thanks!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.