Search Field

Hi there,

most i can offer is this CSS, which will work with the GP Navigation Search, when you have the Navigation as Header enabled:

.main-navigation .navigation-search {
	position: static;
	left: unset;
	opacity: 1;
	visibility: visible;
	order: 20;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s;
}
.main-navigation .navigation-search.nav-search-active {
	max-height: 500px;
}

Yep, it worked but for the smoother animation what Can I do?
Check the animation is laggy

You can't animate Padding so you need to remove the padding you added to the .main-navigation .navigation-search.nav-search-active

Instead add some margin to the input field:

.navigation-search input[type="search"] {
     margin: 10px 0;
}

Perfect Thanks a lot.

You're welcome