CODEWITHSUNDEEP
reactjsjsxreact-bootstrap
Fraser Price
Fraser Price

Reputation: 909

react-bootstrap NavBar padding

I am using the react-bootstrap library to construct a nav bar at the top of my page using Navbar import. However, the bar seems to have some padding at the bottom which I do not want and can't seem to remove, as seen here (Yellow on bottom. Also navbar component does not seem to span the entire page [as seen by white space on either side of bar]; not sure of why this is either):

enter image description here

I would like the bar to span the page and have no padding on the bottom.

My render method is as follows:

  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.

Upvotes: 9

Views: 16825

Answers (3)

Fraser Price
Fraser Price

Reputation: 909

I didn't realise body tag has default margin; whoops

Upvotes: 5

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36179

Just like @Zero wrote .navbar class has margin-bottom: 20px; property. You will need to override it or set margin-top: -20px; on element below if you want to keep it for some other view.

When it comes to padding at the right side - it's left for a vertical scroll bar. I have faced the same issue when I was using react-sidebar.

Upvotes: 4

Zero
Zero

Reputation: 356

The space below navbar is coming from .navbar class in bootstrap.css. You can remove the margin-bottom: 20px; in bootstrap.css. If you’re using bootstrap.css via CDN you can add style to your navbar, like so:

<Navbar style={{marginBottom: "0"}} inverse className="fixed-top collapseOnSelect nav-bar">

Regarding your problem with white space on either side or navbar. I think the problem is with how you render an element into the DOM. You should check the root DOM node in your HTML, maybe it has padding or margin. It could also be from the .nav-bar class in your span, or some other class.

Upvotes: 1

Related Questions