Below are two tutorials on search bar and search shortcode.

1. Expanded search bar
2. Make the search shortcode slide open

1) Expanded search bar

The default search bar only shows the search icon, and you need to click on the icon to open the search field.
If you need the search field to always be opened, add the rule below in the Global Custom CSS Rule box.

#header-search .search-form .search-field,.header-search .search-form  .search-field,.menu-search .search-form  .search-field {
background-color:#f0f0f0;border:2px solid #c3c0ab;cursor:text;outline:0;width:230px;
}

Note: If you are changing any of the values in that rule, you will need to also add the following one with the same modified values.

#header-search .search-form  .search-field:focus,.header-search .search-form  .search-field:focus,.menu-search .search-form  .search-field:focus {
background-color:#f0f0f0;border:2px solid #c3c0ab;cursor:text;outline:0;width:230px;
}

 

2) Make the search shortcode slide open

The search in the header is a modern slide open one. If you click on the icon, the search box slides open. But the search shortcode will open a traditional always open search box.

The rules below will make the search shortcode behave like the header one, display just the icon and slide open on click.

.weaverx-plus-search {overflow:hidden;}

.weaverx-plus-search .search-form {
position:absolute;
right:10px;
top:5px;
}
.weaverx-plus-search .search-form:before,.menu-search .search-form:before{
position:absolute;
top:5px;
left:2px;
font:normal 36px/1 Genericons!important;content:"\f400";
speak:none;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
z-index:2000
}
.weaverx-plus-search .search-form .search-field,.menu-search .search-form .search-field{
background-color:transparent;
border:none;
box-sizing:border-box;
cursor:pointer;
margin:3px 0px;
padding:0 0 0 36px;
position:relative;width:0
}
.weaverx-plus-search .search-form .search-field{
height:39px;
font-size:120%;
z-index:2000
}
.weaverx-plus-search .search-field:focus {
background-color:#f0f0f0;
border:2px solid #c3c0ab;
cursor:text;
outline:0;
width:230px;
z-index:1999;
}