FAQ

Frequently Asked Questions

I imported the menu but the burger icon isn't showing and the menu opens when I click anywhere.

You most likely need to add styles. The burger icon is there, but invisible, and taking up the entire screen because it defaults to 100% width/height you haven't given it a size/background color yet.

From the docs on styling:

All the animations are handled internally by the component. However, the visual styles (colors, fonts etc.) are not, and need to be supplied, either with CSS or with a JavaScript object passed as the styles prop.

Can I change the transition property of the menu?

Yes, but it's not recommended for animations other than Slide due to how other page elements are designed to move with the transition.

You can access it through the bmMenuWrap key of the styles prop:

var styles = {
  bmMenuWrap: {
    transition: ''
  }
}

<Menu styles={ styles } />

I have a fixed header, but it's scrolling with the rest of the page when I open the menu.

Unlike the rest of your content, fixed elements need to be placed outside your page-wrap element, so your layout structure will look something like this:

<div id="outer-container">
  <header>I am a fixed header!</header>
  <Menu pageWrapId={ "page-wrap" } outerContainerId={ "outer-container" } />
  <main id="page-wrap">
    .
    .
    .
  </main>
</div>

A common use for this is a fixed header, but the same applies to any elements you want to remain fixed and positioned relative to the viewport.

This package is making my Webpack bundle huge due to snapsvg-cjs.

If you're not using one of the animations that needs Snap.svg (Elastic or Bubble), then you can import the menu like this:

import Menu from 'react-burger-menu/lib/menus/slide'

This will keep Snap.svg out of your bundle.