reactstrap navbar icon doesn't appear - css

Question

I'm trying to make a navbar to my react app and I was using this code:
ReactStrap navbar component
However, the navbar icon doesn't appear in small devices view.
small devices navbar (icon is not show)
My NavBar.js
import React, {Component} from 'react';
import NavItems from "./NavItems";
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
class NavBar extends Component {
constructor(props) {
super(props);
this.toggleNavbar = this.toggleNavbar.bind(this);
this.state = {
collapsed: true
};
}
toggleNavbar() {
this.setState({
collapsed: !this.state.collapsed
});
}
render() {
return (
<div>
<Navbar color="faded" light>
<NavbarBrand href="/" className="mr-auto">Hoje para jantar</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
<Collapse isOpen={!this.state.collapsed} navbar>
<Nav navbar>
<NavItems>
<NavLink href="/components/">Components</NavLink>
</NavItems>
</Nav>
</Collapse>
</Navbar>
</div>
);
}
}
export default NavBar;

Answer 1

I guess you are missing the expand prop in Navbar component.
If you set expand prop to "lg" for example, navbar will add the icon for devices with smaller width than "lg", which is smaller than 1200px:
<Navbar color="light" light expand="lg">...</Navbar
You can also set the expand prop to "md" or "sm".

Answer 2

I tried recreating your problem using create-react-app and put together the following package.json
{
"name": "so2",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^4.0.0-beta.2",
"jquery": "^3.2.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-popper": "^0.7.4",
"react-scripts": "1.0.17",
"reactstrap": "^5.0.0-alpha.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
My version of NavBar.js, whcih is a copy of yours without lines 2, and 25-27:
import React, {Component} from 'react';
// import NavItems from "./NavItems";
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
class NavBar extends Component {
constructor(props) {
super(props);
this.toggleNavbar = this.toggleNavbar.bind(this);
this.state = {
collapsed: true
};
}
toggleNavbar() {
this.setState({
collapsed: !this.state.collapsed
});
}
render() {
return (
<div>
<Navbar color="faded" light>
<NavbarBrand href="/" className="mr-auto">Hoje para jantar</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
<Collapse isOpen={!this.state.collapsed} navbar>
<Nav navbar>
{/*<NavItems>*/}
{/*<NavLink href="/components/">Components</NavLink>*/}
{/*</NavItems>*/}
</Nav>
</Collapse>
</Navbar>
</div>
);
}
}
export default NavBar;
And got this
In my own experience I have noticed that it is quite easy to cause a css conflict by experimenting or implementing your desired changes. What I would do is test any css changes you have made on a fresh project, spot the trouble, then fix it in the original (working) project.
I am hoping this helps you since I just spent the entire morning trying to experiment with multiple css files and react components. I wish I could be more helpful but I'm not allowed to post comments yet. Good luck!