Hi guys!

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!

Below my html and css code.

On Recently Reviewed headline will be later a script where with js queries will display some Listings from a WordPress Plug in…

But for now i want when i click on the search box in the center of the page to display underline the form that its on the top like tripadvisor does!

Html

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

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