How to use react-burger-menu with react router?

Question

I'm trying to follow this guide (https://github.com/negomi/react-burger-menu) to implement react-burger-menu with react-router

Specifically this part https://github.com/negomi/react-burger-menu/wiki/FAQ#why-doesnt-the-link-component-from-react-router-work.

The issue I'm having is that the menu button seems to be placed on the left of the menu and the menu does not seem to hide. Here's a screenshot of what that looks like.

My code looks like this:

app.js

// This component handles the App template used on every page.
import React, {PropTypes} from 'react';
import SideBar from './common/Header';

class App extends React.Component {
    render() {
        return (
            <div className="container-fluid">
                        <SideBar />
                        {this.props.children}
            </div>
        );
    }
}

App.propTypes = {
    children: PropTypes.object.isRequired
};

export default App;

header.js

import React, {PropTypes} from 'react';
import { Link, IndexLink } from 'react-router';
import {slide as Menu} from 'react-burger-menu';
import Radium from 'radium';

let RadiumLink = Radium(Link);
let RadiumIndexLink = Radium(IndexLink);

const SideBar = () => {
    return (


    <Menu className="bm-menu">
        <RadiumIndexLink className="bm-item-list" to="/" activeClassName="active">Home</RadiumIndexLink>
        <RadiumLink className="bm-item-list" to="/courses" activeClassName="active">Courses</RadiumLink>
        <RadiumLink className="bm-item-list" to="/about" activeClassName="active">About</RadiumLink>
    </Menu>

    );
};

export default SideBar;

style.css

#app {
    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #4d4d4d;
    min-width: 550px;
    max-width: 850px;
    margin: 0 auto;
}

a.active {
    color: orange;
}

nav {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Position and sizing of burger button */
.bm-burger-button {
  position: fixed;
  width: 36px;
  height: 30px;
  left: 36px;
  top: 36px;
}

/* Color/shape of burger icon bars */
.bm-burger-bars {
  background: #373a47;
}

/* Position and sizing of clickable cross button */
.bm-cross-button {
  height: 24px;
  width: 24px;
}

/* Color/shape of close button cross */
.bm-cross {
  background: #bdc3c7;
}

/* General sidebar styles */
.bm-menu {
  background: #373a47;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
}

/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
  fill: #373a47;
}

/* Wrapper for item list */
.bm-item-list {
  color: #b8b7ad;
  padding: 0.8em;
}

/* Styling of overlay */
.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
}

Why is the button for the toggle appearing to the left of the actual menu and why doesn't the actual menu hide? If I click the toggle, the menu just shifts right even more...

Answer 1

Add this to your CSS:

.bm-menu-wrap {
  bottom: 0;
  left: 0;
}

This will position the menu to the left of the screen.

The button appearing on the left side of the screen is intentional, if you want it to stick to the page instead of following you when you scroll, change

.bm-burger-button {
   position:fixed;
} 

to

.bm-burger-button {
   position:absolute;
}