my menu opens when I click anywhere on my page

[mikael-d]

Hello my menu opens when I click anywhere on my page, I would like it to open only by clicking on the icon. Can i help me please ? thanks

const Header = ({ toggleMenuIsOpen,menuIsOpen}) => {
  console.log(menuIsOpen);

  return (

    <div className="header">

      <div className="logo">
        <img alt="logo-icon" className="logo-icon" src="icons/men2.png" />
        <span className="logo-title">FRATER</span>
      </div>

      {/* menu burger */}

        <div id="outer-container">
          <Menu
            onStateChange={toggleMenuIsOpen}
            disableCloseOnEsc
            disableAutoFocus
            noOverlay
            right
            customBurgerIcon={<img alt="menu-burger" src="icons/meat.svg" />}
          >
            <a id="home" className="menu-item" href="/">Acceuil</a>
            <a id="about" className="menu-item" href="/about">connection</a>
            <a id="contact" className="menu-item" href="/contact">inscrirptioin</a>
          </Menu>
        </div>

    </div>

  );
};

[negomi]

Hi @mikael-d,

You are supplying a custom burger icon, so this is the first thing I would check. Is it rendering at the correct size?

[negomi]

Closing due to inactivity, please let me know if you still need help.