Why Stays React Bootstrap Navbar Collapsed?

I followed the React-Bootstrap documentation, especially this piece of code to make my navbar -> https://react-bootstrap.github.io/components/navbar/#navbars-mobile-friendly How

Solution 1:

Edit:

At present, React Bootstrap is for Bootstrap 3 only.

To fix your issue, follow the solution I outlined in this answer:

https://stackoverflow.com/a/48627104/8270343

Once React Bootstrap becomes compatible with Bootstrap 4, the following information will become relevant:

It stays collapsed because you don't have the navbar-expand-* class in your navbar. That responsive class tells Bootstrap from which breakpoint onwards the navbar has to expand.

So, if you want it to expand from the lg breakpoint onwards i.e. make it expand for screens that are large (lg) and larger, then you need to add the navbar-expand-lg class to your navbar.

That means: In your case, your react code needs to be adjusted so that this class is included in the HTML output for the navbar.

You'll find more info about this class here:

https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

Solution 2:

Here is a working sample of Bootstrap 4.

Pre-requisites:

npm install --save bootstrap@4.0.0
npm install --save reactstrap@next
npm install --save jquery@1.9.1
npm install --save react-transition-group
npm install --save react-popper
npm install react-router-bootstrap --save

Make sure you have react-router-bootstrap installed. LinkContainer is the component that will make the link clickable. It must be placed outside of DropdownItem for it to work in Firefox. Also, adding className="collapse" to Collapse component will hide the menu initially in Firefox.

import React, { Component } from 'react';
import logo from '../img/logo_header.png';
import { LinkContainer } from 'react-router-bootstrap';
import { Button, ButtonGroup, NavDropdown, Collapse, Navbar, 
    NavbarToggler, NavbarBrand, Nav, NavItem, NavLink,
    Dropdown, DropdownMenu, DropdownToggle, DropdownItem, UncontrolledDropdown } from 'reactstrap';

class MyComponent extends Component{
    constructor(props) {
        super(props);

        this.toggleNavbar = this.toggleNavbar.bind(this);
        this.state = {
            isOpen: false
        };
    }

    toggleNavbar() {
        this.state.isOpen = App.myVar.isNavBarOpen; //fixes next time route change where isOpen=true
        let isOpen = !this.state.isOpen; //fixes initial delay in calling setState(), where clicking first time didn't open NavBar
        this.setState({
            isOpen: isOpen
        });
        App.myVar.isNavBarOpen = isOpen;
    }
    render(){
    return (
      <div>            
        <Navbar color="faded" light expand="md">
            <NavbarBrand href="/">
                <a href="http://example.com/" target="_blank"><img src={logo} alt="Logo" /></a>
                <a href="http://example.com/" target="_blank"><h2 className="header-title">My Site</h2></a>
            </NavbarBrand>                
            <NavbarToggler onClick={this.toggleNavbar} />
            <Collapse isOpen={App.myVar.isNavBarOpen} navbar className="collapse">
              <Nav className="ml-auto" navbar>
                <NavItem><LinkContainer to="/admin"><NavLink>Home</NavLink></LinkContainer></NavItem>
                <UncontrolledDropdown nav inNavbar>
                  <DropdownToggle nav caret>
                    Link 1
                  </DropdownToggle>
                  <DropdownMenu >
                    <LinkContainer to="/sub-link1">
                        <DropdownItem>Sub Link 1</DropdownItem>
                    </LinkContainer>
                  </DropdownMenu>
                </UncontrolledDropdown>                    
                <LinkContainer to="/logout">
                    <NavItem><NavLink>Logout</NavLink></NavItem>                                        
                </LinkContainer>
              </Nav>
            </Collapse>
        </Navbar>
      </div>
    )
    }
}

export default MyComponent;

There was bug where if we click on a menu link, the route would change but the NavBar menu would remain open, thus, we needed to use a global variable at the parent Component eg. index.js to manage it's open state.

App.js

App.myVar = {
    isNavBarOpen: false
}

index.js

history.listen((location, action) => {    
    App.myVar.isNavBarOpen = false; //use global variable to manage NavBar isOpen in nested component
});

Solution 3:

This feature works fine with react-bootstrap 1.3.0. It has bootstrap 4.5 with it.