Fullwidth Search Bar under header and disappear on scroll

[tuanphan]

#1. First, you need to edit Site Footer

and add a Search Block

#2. Use this code to Code Injection Footer to move Search under Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('footer.sections .search-block').appendTo('header#header');
});
</script>

You will have

#3. Use this code to Custom CSS box

header#header + .search-block {
    position: relative;
    top: 97px;
    transition: all 0.3s;
    background-color: #fff;
    padding: 0px !important;
}
header#header.shrink + .search-block {
    transition: all 0.3s;
    transform: translateY(-300px);
}

Result