stvoutlk Hi
It will require a bit custom css for this smart search module.
1/ Create a Smart search module and assign to header-cta
position of JA Nova template - or position you have on your site.
2/ Copy this search icon to: `/templates/ja_nova/images/
3/ Add this custom css code:
#t4-header .form-search .search-query:focus, #t4-header .form-search .js-finder-search-query:focus {
background-image: url("../../images/search.svg");
background-color: #fff;
border-color: rgba(0, 0, 0, 0.1);
background-position: 12px center;
-webkit-box-shadow: none;
box-shadow: none;
width: 220px;
padding-right: 1rem;
padding-left: 40px;
outline: none;
}
#t4-header .form-search .search-query, #t4-header .form-search .js-finder-search-query {
background-image: url("../../images/search.svg");
background-position: 12px center;
background-repeat: no-repeat;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid;
border-radius: 0.5rem;
position: absolute;
padding: 0 0 0 48px;
right: 0;
top: 0;
height: 48px;
max-width: none;
z-index: 10;
width: 48px;
-webkit-transition: 500ms all;
transition: 500ms all;
}