In my React app, I have implemented a navbar using the provided code. It looks great on wide browser windows, but once it goes below the navbar-expand-lg breakpoint, the icons start stacking vertically. How can I prevent this behavior? (refer to the screenshot below code)
import React, {Component} from 'react';
import {
Badge,
Nav,
Navbar,
NavbarBrand,
NavbarToggler,
NavItem,
NavLink,
} from 'reactstrap';
import FontAwesome from '@fortawesome/react-fontawesome';
class Header extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Navbar dark color="dark" expand="lg" className="w-100 p-1">
<NavbarToggler className="d-flex"/>
<NavbarBrand className="ml-3" href="/">Logo</NavbarBrand>
<Nav className="d-flex ml-auto" horizontal="end" navbar>
<NavItem>
<NavLink href="#">
<FontAwesome icon={["fas","bell"]} className="text-light" size="lg" />
<Badge pill color="danger">5</Badge>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">
<FontAwesome icon={["fas","clipboard"]} className="text-light" size="lg" />
<Badge pill color="warning">5</Badge>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">
<i className="icon-location-pin"></i>
<Badge pill color="info">5</Badge>
</NavLink>
</NavItem>
</Nav>
<NavbarToggler className="d-flex ml-3"/>
</Navbar>
);
}
}
export default Header;
https://i.sstatic.net/ckPjw.png https://i.sstatic.net/ROn2m.png