17 - Adding the NavBar (hamburger not expanding on mobile view)[SOLVED]

React
1

Hi all,

Has anyone encountered the issue when you set your browser to mobile view, the navlinks all turns into ‘hamburger’ when you click you expect it to expand but it doesnt?

I’m using Bootstrap5, so the codes I followed are from the bootstrap documentation. I’m not able to figure out why it doesn’t work.

Can anyone help please?

Here’s my codes for navbar.jsx:

import React from "react";
import { Link } from "react-router-dom";

const NavBar = () => {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <div className="container-fluid">
        <h1 className="mx-2">Vidly</h1>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav">
            <li className="nav-item">
              <Link className="nav-link" aria-current="page" to="/">
                Movies
              </Link>
            </li>
            <li className="nav-item">
              <Link className="nav-link" to="/customers">
                Customers
              </Link>
            </li>
            <li className="nav-item">
              <Link className="nav-link" to="/rentals">
                Rentals
              </Link>
            </li>
            <li className="nav-item">
              <Link className="nav-link" to="/login">
                Login
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
};

export default NavBar;

Here’s my imports from index.js:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import "popper.js/dist/popper-utils";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/js/bootstrap.min.js";
import "font-awesome/css/font-awesome.css";

import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);
2

Hey all!

For those who’s having the same issue and looking for a solution, I’ve used reactstrap to apply the bootstrap navbar.

Now when you adjust your browser to mobile view, this should turn your navlinks into a hamburger it toggles to expanding the menu when clicked.

You can check the documentation here: reactstrap

Cheers!

1 Like
3

Thanks for following up with your solution. I think you also could’ve solved it by installing jQuery and/or Popper.