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

Home Forums Support [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)

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

    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
    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
    Webmaster

    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
    Staff
    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
    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.