Customizing The KadenceWP Search Modal

In the KadenceWP WordPress theme, when you click the search icon the entire screen is covered by a modal. I’ll show you how to make it smaller and position it wherever you wish with just a few lines of CSS!

Here’s the code we ended up with:

@media (min-width: 768px) {
#search-drawer .drawer-inner {
width: 50%;
height: 160px;
left: 25%;
top: 25%;
border-radius: 10px;
box-shadow: 10px 10px 10px #000;
}
#search-drawer .drawer-inner input.search-field:focus {
color: white;
box-shadow: none;
}
}