Add search popout

principal

Hi... Is it possible to add a search popout feature like the one on this template: https://www.joomlart.com/demo/ja-flix

I understand much of what is taking place, but would like to be pointed in the right direction regarding the js code used, if possible.

Maybe I should download the template and copy the relevant code, then change classes etc to suit?

Any help would be appreciated.

Many thanks!

Ninja

principal
Hi
In JA Flix template its from the head-search position. You can find it in the template layout options > edit header section to see the module position code.
The style is coming from below code

.head-search .search .form-control, .head-search .search .inputbox, .head-search .search .search-query, .head-search .form-search .form-control, .head-search .form-search .inputbox, .head-search .form-search .search-query {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzkyMTU4RUZFNzFGMTFFOUI1MzhDQ0ZEODE4MjY0RDYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzkyMTU4RjBFNzFGMTFFOUI1MzhDQ0ZEODE4MjY0RDYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozOTIxNThFREU3MUYxMUU5QjUzOENDRkQ4MTgyNjRENiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozOTIxNThFRUU3MUYxMUU5QjUzOENDRkQ4MTgyNjRENiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pq5xn/oAAADBSURBVHjanFMBEcIwDMzhoBZqoRZmYVpAQpEwC7NQC1joJAwJpYPPkStJOMjd37b290nzKbXWSGDuKB07ULBGFuTH0t5xAzjWbwJnEI+MURACfj4iWwIBhIp3LRNXE8e9ExElesW14056XPBM44YU2MiOzRPgzegIRDMJzsWdt+ziRibLhQzCojQye1ZKuwqIO8grnGliqCZvkHgeqhigigqCWJs9AVnReJRJEyFvzhV8iPwqMIqkfwT41j5deQgwAOGod5BSXBgkAAAAAElFTkSuQmCC);
    background-position: 40px center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    border-left: 1px solid rgba(255,255,255,.1);
    color: #343a40;
    position: absolute;
    padding: 0 0 0 96px;
    right: 0;
    top: 0;
    height: 96px;
    max-width: none;
    z-index: 10;
    width: 96px;
    -webkit-transition: 500ms all;
    -o-transition: 500ms all;
    transition: 500ms all;
}
.t4-palette-mainnav .head-search .search .form-control, .t4-palette-mainnav .head-search .form-search .search-query {
    background-color: #080808;
}
.head-search .search .form-control:focus, .head-search .search .inputbox:focus, .head-search .search .search-query:focus, .head-search .form-search .form-control:focus, .head-search .form-search .inputbox:focus, .head-search .form-search .search-query:focus {
    background-color: #080808;
    color: #fff;
    width: 384px;
    padding-right: 1.6rem;
}

You can find it in JA Flix template.css file

principal

Thanks Pankaj! So, all done with CSS and appears on focus state.

Thank you!