React-bootstrap NavBar padding
I am using react-bootstrap library to build a navbar at the top of my page using a Navbar import. However, the panel seems to have a padding at the bottom that I don't want and cannot remove, as seen here (yellow at the bottom. Also the navbar component doesn't seem to span the entire page [as seen by the space on either side of the bar] , not sure why this is so):
I would like the panel to span the page and have no padding at the bottom.
My render method looks like this:
render() {
if(Auth.isUserAuthenticated() && this.props.location.pathname === '/') {
return <div/>;
}
return (
<span className="nav-bar">
<Navbar inverse className="fixed-top collapseOnSelect nav-bar">
<Navbar.Collapse>
<Navbar.Header className="locl-link">
<Navbar.Brand>
<LinkContainer to="/">
<a>locl</a>
</LinkContainer>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<BootstrapNav>
<LinkContainer to="/about">
<NavItem active={this.linkActive("about")}>About</NavItem>
</LinkContainer>
</BootstrapNav>
<BootstrapNav pullRight>
{this.logInOut()}
</BootstrapNav>
</Navbar.Collapse>
</Navbar>
</span>
);
}
Any help would be greatly appreciated.
source to share
The space below the nav bar comes from a class .navbar
in bootstrap.css. You can delete margin-bottom: 20px;
in bootstrap.css. If you are using bootstrap.css via CDN, you can style your navbar like:
<Navbar style={{marginBottom: "0"}} inverse className="fixed-top collapseOnSelect nav-bar">
Regarding your issue with a space on either side or navbar. I think the problem is with how you render the element to the DOM. You should check the root DOM node in your HTML, maybe it has padding or margin. It can also be from a class .nav-bar
in yours span
or another class.
source to share
Just like @Zero wrote the class .navbar
has a property margin-bottom: 20px;
. You will need to override it or set margin-top: -20px;
to the element below if you want to keep it for some other look.
When it comes to padding on the right side, it remains for the vertical scrollbar. I faced the same problem when I was using "sidebar".
source to share