Bootstrap navbar is storing links in hamburger menu by default



  • I want to make it so that the navbar will display all of my links regularly, but store them inside a hamburger menu when the screen shrinks. However, it's automatically storing everything inside the hamburger menu by default. Any ideas what I might be doing wrong? I'm building this as a React component and referencing this source: https://getbootstrap.com/docs/3.4/examples/navbar/.

    render() {
    return (
      <nav className="navbar navbar-default navbar-dark bg-info">
        <div className="container-fluid">
          <div className="navbar-header">
            <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span className="sr-only">Toggle navigation</span>
              <i className="fa fa-bars"></i>
            </button>
            <Link className="navbar-brand" to="/AllInProgress">Ghost Writer</Link>
          </div>
          <div id="navbar" className="navbar-collapse collapse">
            <ul className="nav navbar-nav">
              <li><Link className="nav-item nav-link" to="/AllInProgress">In-progress stories</Link></li>
              <li><Link className="nav-item nav-link" to="/AllComplete">Complete stories</Link></li>
            </ul>
    
            <ul className="nav navbar-nav navbar-right">
              <li><Link className="nav-item" to="/Profile">{this.state.user.username}</Link></li>
              <li><img className="profile-pic" src="https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/pencil-512.png" alt="User pic" /></li>
              <li><div className="dropdown show">
                <Link to="/Profile" className="btn btn-secondary dropdown-toggle profileDropdown" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  My profile
                </Link>
                {this.renderRedirect()}
                <div className="dropdown-menu" aria-labelledby="dropdownMenuLink">
                  <Link to="/profile" className="dropdown-item">Profile</Link>
                  <Link to="/" className="dropdown-item" onClick={this.logout}>Sign Out</Link>
                </div>
              </div>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    );
    }


  • I found an answer! I updated my CDNs to the most recent version and used a more recent bootstrap component that was more compatible with the latest CDNs. I think the one I was using before wasn't totally compatible. Here's the new code that worked:

    render() {
    
    {/* <nav className="navbar navbar-expand-lg navbar-dark bg-info collapse navbar-collapse"> */ }
    return (
      <nav className="navbar navbar-expand-lg navbar-dark bg-info">
        <Link className="navbar-brand" to="/AllInProgress">Ghost Writer</Link>
    
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
    
        <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul className="navbar-nav mr-auto mt-2 mt-lg-0">
            <li className="nav-item">
              <Link className="nav-item nav-link" to="/AllInProgress">In-progress stories</Link>
            </li>
            <li className="nav-item">
              <Link className="nav-item nav-link" to="/AllComplete">Complete stories</Link>
            </li>
          </ul>
          <form className="form-inline my-2 my-lg-0">
            <Link className="nav-profile" to="/Profile">{this.state.user.username}</Link>
            <img className="profile-pic" src="https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/pencil-512.png" alt="User pic" />
            <div className="dropdown show">
              <Link to="/Profile" className="btn btn-secondary dropdown-toggle profileDropdown" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                My profile
                 </Link>
              {this.renderRedirect()}
              <div className="dropdown-menu" aria-labelledby="dropdownMenuLink">
                <Link to="/profile" className="dropdown-item">Profile</Link>
                <Link to="/" className="dropdown-item" onClick={this.logout}>Sign Out</Link>
              </div>
            </div>
          </form>
        </div>
      </nav>


  • I found an answer! I updated my CDNs to the most recent version and used a more recent bootstrap component that was more compatible with the latest CDNs. I think the one I was using before wasn't totally compatible. Here's the new code that worked:

    render() {
    
    {/* <nav className="navbar navbar-expand-lg navbar-dark bg-info collapse navbar-collapse"> */ }
    return (
      <nav className="navbar navbar-expand-lg navbar-dark bg-info">
        <Link className="navbar-brand" to="/AllInProgress">Ghost Writer</Link>
    
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
    
        <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul className="navbar-nav mr-auto mt-2 mt-lg-0">
            <li className="nav-item">
              <Link className="nav-item nav-link" to="/AllInProgress">In-progress stories</Link>
            </li>
            <li className="nav-item">
              <Link className="nav-item nav-link" to="/AllComplete">Complete stories</Link>
            </li>
          </ul>
          <form className="form-inline my-2 my-lg-0">
            <Link className="nav-profile" to="/Profile">{this.state.user.username}</Link>
            <img className="profile-pic" src="https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/pencil-512.png" alt="User pic" />
            <div className="dropdown show">
              <Link to="/Profile" className="btn btn-secondary dropdown-toggle profileDropdown" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                My profile
                 </Link>
              {this.renderRedirect()}
              <div className="dropdown-menu" aria-labelledby="dropdownMenuLink">
                <Link to="/profile" className="dropdown-item">Profile</Link>
                <Link to="/" className="dropdown-item" onClick={this.logout}>Sign Out</Link>
              </div>
            </div>
          </form>
        </div>
      </nav>

Log in to reply