单击图标时搜索打开，但单击关闭图标时不会关闭

Question

I have an error on my JavaScript using WordPress where I can open the search but can't close it. I have a functions.php where there is a wp_enqueue_script for a live-search script, Search.js, Index.js, header.php and footer.php with code necessary with the problem:

functions.php code:

wp_enqueue_script('live-search-javascript',
get_theme_file_uri('/js/modules/Search.js'), array('jquery'), '1.0', true);

header.php icon code:

<span class="search-trigger js-search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>

footer.php code:

<div class="search-overlay">
  <div class="search-overlay__top"></div>
    <div class="container"></div>
      <i class="fa fa-search search-overlay__icon" aria-hidden="true"></i>
      <input type="text" class="search-term" placeholder="Search DC" id="search-term">
      <i class="fa fa-window-close search-overlay__close" aria-hidden="true"></i>
</div>

Index.js code:

import "../css/style.scss";
import $ from 'jquery';

// Our modules / classes
import MobileMenu from "./modules/MobileMenu";
import HeroSlider from "./modules/HeroSlider";
import GoogleMap from "./modules/GoogleMap";
import Search from "./modules/Search";

// Instantiate a new object using our modules/classes
const mobileMenu = new MobileMenu();
const heroSlider = new HeroSlider();
const googleMap = new GoogleMap();
const mySearch = new Search();

Search.js code:

import $ from 'jquery';

class Search {
  constructor() {
    this.openButton = $(".js-search-trigger");
    this.closeButton = $(".search-overlay__close");
    this.searchOverlay = $(".search-overlay");
    this.events();

  }

  events() {
    this.openButton.on("click", this.openOverlay.bind(this));
    this.closeButton.on("click", this.closeOverlay.bind(this));
  }


  openOverlay() {
    this.searchOverlay.addClass("search-overlay--active");

  }

  closeOverlay() {
    this.searchOverlay.removeClass("search-overlay--active");
  }
}

export default Search;

The search opens, it just won't close. How do I solve this issue?

Answer 1

I figured out that it does close only I have to scroll down and not at the top of the page. The file where it can be fixed is called search-overlay.scss in the css file. The search bar needs to have a place where it can be executed to do searches, not at the very top of the page where the header is.