menu not closing on mobile
inhyechoi opened this issue · 1 comments
When I click the menu or click outside menu on mobile the menu doesn't close.
https://github.com/inhyechoi/inhyechoi-portfolio https://inhyechoi.netlify.app/
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! 🙂