Want the react-hamburger-menu icon to be in a container that has the same behaviour as the hamburger icon

[sohinim98]

Want the react-hamburger-menu icon to be in a container (like a header with 100% width with a solid background color) that has the same behaviour as the hamburger icon. Tried it by wrapping a fixed div around it first to get started, but that doesn't seem to work.

import React from "react"
import logo from "../images/favicon.ico"
import { slide as Menu } from "react-burger-menu"

class Hamburger extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      menuOpen: false,
    }
    this.handleStateChange = this.handleStateChange.bind(this)
    this.closeMenu = this.closeMenu.bind(this)
  }

  // This keeps your state in sync with the opening/closing of the menu
  // via the default means, e.g. clicking the X, pressing the ESC key etc.
  handleStateChange(state) {
    this.setState({ menuOpen: state.isOpen })
  }

  // This can be used to close the menu, e.g. when a user clicks a menu item
  closeMenu() {
    this.setState({ menuOpen: false })
  }

  render() {
    return (
      <div id="outer-container" className="hamburger--fixed-header">
        <Menu
          outerContainerId={ "outer-container" }
          isOpen={this.state.menuOpen}
          onStateChange={state => this.handleStateChange(state)}
        >
          <a
            href="#top"
            onClick={() => this.closeMenu()}
            aria-label="home"
            className="logo__link"
          >
            <img
              src={logo}
              alt="'nuffsaid logo"
              className="hamburger--logo"
            />
          </a>
          <a href="#top" onClick={() => this.closeMenu()} className="menu-item">
            Home
          </a>
          <a
            href="#product"
            className="menu-item"
            onClick={() => this.closeMenu()}
          >
            Product
          </a>
          <a href="#about" className="menu-item" onClick={() => this.closeMenu()}>
            About
          </a>
          <a
            href="#request"
            className="menu-item"
            onClick={() => this.closeMenu()}
          >
            Request Access
          </a>
        </Menu>
      </div>
    )
  }
}

export default Hamburger

CSS -

.hamburger--fixed-header {
  position: fixed !important;
  top: 0 !important;
  background-color: yellow !important;
  width: 100% !important;
}

Was wondering if there is an inbuilt class/id I can use.

[sohinim98]

Basically something to wrap the .bm-burger-button class in.

[negomi]

Hey @sohinim98, the best way to achieve this is probably to disable the default burger icon with <Menu customBurgerIcon={ false } /> (more info here: https://github.com/negomi/react-burger-menu#custom-icons).

Then you can trigger the menu open/close state on clicks from your custom header/icon/whatever you want to use in place of the burger icon.

Don't try to wrap the menu inside the header, but instead structure it like:

<div>
  <header> // Make this fixed
    <YourCustomButton onClick={...call function to toggle menu here...} />
  </header>
  <Menu
    customBurgerIcon={false}
    ...other props go here...
  >
    ...menu contents go here...
  </Menu>
</div>

[sohinim98]

Works perfectly! Thanks :)