menu not closing on mobile

Hi @inhyechoi,

The problem here is the markup structure in your app. The overlay (which you click on to close the menu) is rendering, but the menu is nested deeply inside your header component, so the overlay is very narrow and not covering the whole screen:

Your app should follow the structure in the docs (and you also need to add the outer-container and page-wrap IDs to the correct elements outside the menu), so your App.js should be something like this:

<div id="outer-container" className="App" height="100%">
  // Fixed elements and menu go outside page-wrap
  <CursorFocus />
  <SocialMedia />
  <ScrollTop />
  <Menu pageWrapId={ "page-wrap" } outerContainerId={ "outer-container" } />
  <div id="page-wrap">
    // Everything else goes inside page-wrap
    <Header />
    <div className="middle">
    </div>
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route path="/projects" component={ProjectPage} />
      <Route path="/experiment" component={ExperimentPage} />
      <Route path="/designguide" component={DesignGuidePage} />
      {/* <Route component={NotFound} /> */}
    </Switch>
    <Footer /> 
  </div>
</div>

It looks like you are also trying to control the state with the isOpen prop. Here is an example of how to do that which might be helpful: https://github.com/negomi/react-burger-menu/wiki/FAQ#i-want-to-control-the-open-state-programmatically-but-i-dont-understand-how-to-use-the-isopen-prop

Hope that helps! 🙂

negomi / react-burger-menu

menu not closing on mobile #437