Search form slide down animation

Hi George,

I'd assume that the full animation would require some custom development - you can try to inspect their code and see how it was done.

Something like this would create a simple version though:

.navigation-search {
    top: 100%;
}

Hi Leo, here is what I have so far, attached. I think I would need to change the search form markup to apply my changes, is there any way to do it in GP? Basically, I would need to add an icon and a search button.

Hi,

You can change the search form's markup by using the generate_navigation_search_output filter.https://docs.generatepress.com/article/generate_navigation_search_output/

As for the default CSS selectors for styling the search form:

/* Height of the search textfield */
.navigation-search input[type="search"] {
    height: 50px; 
}
/* padding and background for the search textfield's container */
form.search-form.navigation-search.nav-search-active {
    padding: 50px;
    background: grey;
}
/* Setting the color of the icon */
span.gp-icon.icon-search {
    background: [your icon bg color here];
    padding: 20px;
    border-radius: 50%;
    color: [your icon color here];
}

Ok that was really helpful, Elvin. I made some progress but I would like some final help with the CSS.

1. I need the grey background around the form to extend full-width, like the example.
2. I need the magnifying glass inside the input field, like the example.
3. I need the input field to extend and overlap the button so the button can sit on top of the search input field at the end, like the example.

Ok, I have fixed everything apart from the full-width functionality on desktop, any ideas?

Hi,

All seems in order now. Container looks full-width now on my end.

Have you resolved this already?

I need to have the toggled search area with the grey background full-width like in the example I posted in my first post.

Ah my bad.

Add this CSS so the form goes full-width:

form.search-form.navigation-search.nav-search-active {
    width: 100vw;
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
}

After adding this, you'll notice that your icon position will look weird.

To address this, change your markup so the form contents are wrapped in a <div class="search-form-wrapper">.

example:

<form ...>
   <div class="earch-form-wrapper">
      <input ...>
      <input ...>
   </div>
</form ...>

and then style it w/ this.

.search-form-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}
.search-form span.gp-icon.icon-search {
    position: absolute;
    z-index: 99;
    color: #596678;
    left: 20px;
}

Ok, got it, I managed to create what I wanted based on your suggestions. There seems to be a small issue, though. When searching for a term that cannot be found, the styling seems to have been carried over to the "Nothing Found" page and the search box is not as it should. Any ideas?

Can you link us to the page in question?

Please be mindful that we have to careful with how much we help with a custom solution like this to be fair to everyone.

Yes, I am aware, actually, it's all done now, it's just the custom search styling affects the other form attached to the page when no results are found. Maybe there was a way to restyle the page search box?

I have reattached site link.

Apologies, I sorted it out myself, just used a different class for the custom form markup.

Thanks, Leo!

All Elvin on this one :)

Apologies, I sorted it out myself, just used a different class for the custom form markup.

Yeah we have to watch out for the class selectors that when we change the markup. :)

Good catch! Glad you got it sorted. :)