I have the following component for my navbar

 <div className="nav-div">
        <Container fluid>

          <Navbar collapseOnSelect expand="sm" className="navbar-nav py-4 mx-auto" fixed="bottom">

              <Navbar.Brand as={HashLink} to="/" className="fs-3">
                <FontAwesomeIcon icon={faHouse} />&nbsp;Timothy Lee
              </Navbar.Brand>

              <Navbar.Toggle aria-controls="responsive-navbar-nav" />

              <Navbar.Collapse id="responsive-navbar-nav">
             
                <Nav className="d-flex justify-content-end flex-grow-1" activeKey="/">                  
                    
                    <Nav.Link as={HashLink} to="/background/#education" className="nav-link fs-4">
                      <FontAwesomeIcon icon={faSchool}/>&nbsp;Education
                    </Nav.Link>

                    <Nav.Link as={HashLink} to="/background/#experience" className="nav-link fs-4">
                      <FontAwesomeIcon icon={faBriefcase}/>&nbsp;Experience
                    </Nav.Link>

                    <Nav.Link as={HashLink} to="/background/#skills" className="nav-link fs-4">
                      <FontAwesomeIcon icon={faWrench}/>&nbsp;Skills
                    </Nav.Link>

                    <Nav.Link as={HashLink} to="/background/#projects" className="nav-link fs-4">
                      <FontAwesomeIcon icon={faLaptopCode}/>&nbsp;Projects
                    </Nav.Link>

                </Nav>

              </Navbar.Collapse>

          </Navbar>
        
        </Container>
      </div>

As of now, the left side of the navbar will collapse properly, but when you click on the 3 line menu, it opens downward, meaning the toggle can't be seen since the navbar is fixed to the bottom.

Is there a field to make the toggle open upwards?