[Resolved] Search Field Below Menu

[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

[David]

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/

[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

[David]

Glad to be of help 🙂

[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

[Tom]

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 🙂

[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

[Leo]

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

[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;
}

[Tom]

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

[Luciano]

yea! it is altmanufacturing.com.

[David]

Try this CSS:

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

[Luciano]

David, you are the man! works flawlessly.

Thanks all!

[David]

Glad we could be of help

[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

[Author]

Posts