I'm using React-Burger-Menu on a project. I've installed it with npm, imported it into my React app, and am properly displaying the hamburger menu on small screens and hiding it on large screens with the use of CSS. On small mobile screens I have display
set to flex
and on large screens where I want the hamburger menu hidden I have display
set to none
.
This works fine when I run the React app with npm
on localhost, but when I build it with npm run build
and push it to Surge.sh
the hamburger menu doesn't work properly. When running the project locally on a large screen the hamburger menu is hidden and my navbar works fine. On small screens my navbar is hidden and the hamburger menu works. After pushing the project to Surge.sh
my full screen navbar breaks and it tries to use the hamburger menu on full screen. Here is my project with the broken hamburger/navbar.
Why is my hamburger menu breaking only when I go live with the code but not when I run the project locally? Is this a problem with installation/configuration?
The docs say the following :
The easiest way to use react-burger-menu is to install it from npm and include it in your own React build process (using Browserify, Webpack, etc).
I've installed React-Burger-Menu with npm install
. Is more configuration needed with webpack in order to get it working properly when it's pushed to Surge.sh
? What do they mean when they say include it in your own React build process using Webpack?