The menu opens / closes when I click anywhere on the page

I can’t seem to figure out how to prevent the menu from opening when I click anywhere in the window. I’m still new to react and I’m currently building my first SPA so I may be missing something obvious but I want the page to behave similar to your demo site http://negomi.github.io/react-burger-menu/. I want to link the isOpen={ toggleMenu } to a custom button with an onClick and have that be the only way to trigger the menu.

constructor(props) 	{
		super(props);
		this.state = ({toggleMenu: true});
    this.handleToggleMenuClick = this.handleToggleMenuClick.bind(this);
	}

  showSettings (event) {
  event.preventDefault();

}

handleToggleMenuClick() {
  this.setState({toggleMenu: !this.state.toggleMenu});
}

<div id="outer-container" >
          <CountdownBar />
        <Menu noOverlay pageWrapId={ "page-wrap" } outerContainerId={ "outer-container" } isOpen={ this.state.toggleMenu }>

          <Row className="show-grid">
            <p>This is only a test</p>
          </Row>

        </Menu>
        <main id="page-wrap">
            <Button type="submit" onClick={this.handleToggleMenuClick} bsStyle="primary" className="btnHeight" block>
              {this.state.toggleMenu ? 'Open' : 'Closed'}
            </Button>
        </main>
      </div>

Any guidance you’re willing to offer is much appreciated.

[negomi]

Have you applied any styles?

It sounds like the burger icon is there, but invisible, and taking up the entire screen because you haven’t given it a size/background color yet.

Check out the docs on styling: https://github.com/negomi/react-burger-menu/blob/master/README.md#styling

You probably want to inspect the HTML in the console to see what elements are being rendered - this should help you debug by seeing what is being clicked to trigger the menu to open 😃

[Stvad]

this is a very weird default behavior though