Buy me a coffee

Fullwidth Search Bar under header and disappear on scroll

#1. First, you need to edit Site Footer

Fullwidth Search Bar Under Header And Disappear On Scroll 01 Min

and add a Search Block

Fullwidth Search Bar Under Header And Disappear On Scroll 02 Min

#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>

Fullwidth Search Bar Under Header And Disappear On Scroll 03.jpg Min

You will have

Fullwidth Search Bar Under Header And Disappear On Scroll 04 Min

#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);
}

Fullwidth Search Bar Under Header And Disappear On Scroll 05 Min

Result:

Fullwidth Search Bar Under Header And Disappear On Scroll 06 Min