[Resolved] Search Field Below Menu

Home Forums Support Search Field Below Menu

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1237947
    Luciano

    Hi I am new here. I just wanted to see if there was a way to add the Search bar to be below the menu and spanning the width of the menu. Similar to how this website is doing it. GoWesty.com

    #1238535
    David
    Staff
    Customer Support

    Hi there,

    take a little bit of work. Try this:

    1. Create a new Hook Element:

    https://docs.generatepress.com/article/hooks-element-overview/

    1.1 Add this to the Hook Content:

    <div class="after-header-search">
        <div class="grid-container">
            <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" placeholder="Search..." />
                    <input type="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" />
                </div>
            </form>
        </div>
    </div>

    1.2 Select the after_header hook
    1.3 Check: Execute PHP
    1.4 Set the Display Rules to Entire Site.

    2. Add this CSS to your Site:

    .after-header-search {
        padding: 10px 0;
        background-color: red;
    }
    
    .after-header-search .searchform div {
        display: flex;
    }
    
    .after-header-search .searchform div input {
        flex: 1;
        line-height: 1;
        padding: 8px 20px
    }
    
    .after-header-search .searchform div input[type="submit"] {
        flex: 0;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #1239015
    Luciano

    David,

    That worked amazingly well. Thank you!

    Now that I see you can create hooks and style CSS you can pretty much achieve anything you want. That is awesome.

    Thanks again,
    Luciano

    #1239273
    David
    Staff
    Customer Support

    Glad to be of help πŸ™‚

    #1240390
    Luciano

    David,

    One other thing related to this that I need some help with.

    The Search bar at the top is great but unfortunately it does not search for my product tags and/or categories. I did some research and found that you need a additional plugin for this so I installed Adv. Woo Search for this. It works as intended when I use the search inside the “out of view” search field in the Shop page but not when I use the search that you helped me create.

    Example:

    I have a product with tags: USB & vent

    When I search “USB” in the Shop sidebar it comes up with the result and shows me all products with that tag or category.

    But when I search with the main search no results come up with USB.

    Can you please help me with this?

    Thanks,
    Luciano

    #1240917
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I wonder if you could replace the search form David provided with their own search form?

    Try replacing this:

    <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" placeholder="Search..." />
            <input type="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" />
        </div>
    </form>

    With this:

    [aws_search_form]

    Then make sure shortcodes are executed in the hook. It may also need some CSS tweaking, depending on their own styles for the form.

    Let me know πŸ™‚

    #1241877
    Luciano

    Hi Tom,

    I just tried that and it did not work. All I see is the actual shortcode when I got to the site, no search box.

    Any other ideas on what I can try?

    Thanks for the help!
    Luciano

    #1241980
    Leo
    Staff
    Customer Support

    Did you make sure execute shortcode is checked in the hook?

    #1241995
    Luciano

    I never checked it but that was the issue. Thank you Leo.

    What if I wanted the search to be sticky to the top navigation? So that if I went to other pages, the search always stayed below the navigation? Is that possible?

    I tried adding this but it did not work:

    .after-header-search {
        position: sticky;
        top: 0;
    }
    #1242217
    Tom
    Lead Developer
    Lead Developer

    It may be possible, can you link us to your site so we can see?

    #1242251
    Luciano

    yea! it is altmanufacturing.com.

    #1242578
    David
    Staff
    Customer Support

    Try this CSS:

    .after-header-search {
        position: -webkit-sticky;
        position: sticky;
        top: 60px;
        z-index: 100;
    }
    #1243263
    Luciano

    David, you are the man! works flawlessly.

    Thanks all!

    #1243948
    David
    Staff
    Customer Support

    Glad we could be of help

    #1249600
    Luciano

    Hi guys,

    Sorry to bring this topic back up but I found a minor bug and I think it has to do with the z-index of the search bar.

    The bug I see is when I scroll down on my page. If I scroll down on my page and then try to bring the menu drop down down, the drop down is behind the search and it makes the drop down items unreadable. I tried to play with the Z-index in the CSS but I was not able to get it working. Is there something I can do to fix this?

    Thanks,
    Luciano

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