Expandable search bar like tripadvisor

I am trying the last two days to make a expandable search form like one that tripadvisor has. My first approach is to practically create a section/page dedicated to this search form and then use javascript when someone clicks on search box on my Front page to expand/show this section like we do usually with Hamburger menus for mobile versions of sites. But i have come across to some issues about the exact positioning of the hidden section/search form page since when you make a Hamburger button and menu a absolute positioning and a top:0 do the trick but my search bar is in the middle of the home page like tripadvisor. Any hints please about how i should approach it and what i should study about it?

Below a photo of what i have achieved till now!

I avoid to post any code since practically its the same approach of any classic Hamburger menu.

Edit : Or i ll post any way the code if its helpful for someone to give me some insights!

Html for a basic (supposedly hidden before someone click on search bar search form)

      <div class="search-page">
            <div class="search-boxPage">
              <input type="text" placeholder="Explore City">
            </div>
            <h3>Explore City</h3>
            
            <div class="testflex">
            <ul class="search-menu-list">
            
              <li><a href="#">Our Daily Suggestions</a></li>
              <li><a href="#">Shopping</a></li>
              <li><a href="#">City Tours</a></li>
              <li><a href="#">Restaurants</a></li>
              <li><a href="#">Events</a></li>
              <li><a href="#">Things to do</a></li>
          
            </ul>
            
          </div>
            <h3>Recently Reviewed</h3>

          </div>

The CSS

    h3{
  color:#fff;
  margin-top:2rem;
}

.search-page {
  position: absolute;
  top:0;
  
  
  
  height: fit-content;
  max-width:100%;
  display: block;
  background-color :green;
  text-align: center;
  padding:4rem 0;
  transition: all 0.3s ease;
  z-index: 5;
 
  
}

.search-boxPage input[type="text"]{
  width: 80%;
  padding:2rem;
  font-size: inherit;
  border: none;
  border-bottom: 3px solid white;
  outline: none;
  background-color: green;
  color: white;
  font-weight: 400;
 

}

.search-page .search-menu-list{
display:flex;
flex-wrap: wrap;
  align-items: center;
  justify-content: center;
 

}

.search-page  .search-menu-list li{
  list-style: none;
}

.search-page .search-menu-list li a:hover{
  transform: translateY(-1rem);

}

.search-page  .search-menu-list li a{
  display: inline-block;
  color:#fff;
  padding:5px;
  list-style: none;
  text-decoration: none;
  margin-right: 2.5rem;
  transition: all 300ms ease-in-out;
  border: solid 2px white;
  border-radius: 1rem;
  padding: 11px 13px 11px 14px;
  margin: 10px;
  
}