using pullRight prop overflows right floated nav | React-Bootstrap/React

Question

Here is my super basic react component that renders a navbar using react-bootstrap:

import React, { Component } from "react";
import { Nav, NavItem, Navbar, Grid } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";

export default function Header() {
  return (
    <Navbar collapseOnSelect>
      <Navbar.Header className="mr-auto">
        <Navbar.Brand>
          <LinkContainer to="/">
            <a>User Management via Redis</a>
          </LinkContainer>
        </Navbar.Brand>
        <Navbar.Toggle />
      </Navbar.Header>
      <Nav pullRight>
        <LinkContainer exact to="/">
          <NavItem>Search</NavItem>
        </LinkContainer>
        <LinkContainer to="/users">
          <NavItem>All Users</NavItem>
        </LinkContainer>
      </Nav>
    </Navbar>
  );
}

I want my navigation links to be floated right, but unfortunately following the react-bootstrap docs and adding pullRight prop to the Nav element makes the right floated nav overflow.

I can easily solve the problem by giving the right floated nav an ID and a margin-left of -30px, but I'd rather not since the actual docs show nicely working examples. How can I get the Nav with the pullRight prop to nicely position itself in the NavBar?

Here's an image showing the issue:

does removing the link container resolve the issue? I wonder if that overflows the bar — wnamen, Sep 05 '17 at 18:27
@bennygenel wrapping the navbar in a fluid container does not work either. — Govind Rai, Sep 05 '17 at 19:17

Dan · Answer 1 · 2019-02-14T07:13:02.670

12

Probably you don't need this anymore. But for anyone stumbling over this, here is a working solution (it worked for me, as "pullRight" didn't work either for some reason):

<Nav className="ml-auto">

edited Feb 14 '19 at 07:13

answered Feb 14 '19 at 07:00

Dan

257
3
12

1

Note that it's `ml-auto` and not `mr-auto`. ("m" stands for "margin".) Burned my hands on that misunderstanding until I found this answer. – Jirka Hanika Jul 31 '19 at 08:48

score 0 · Answer 2 · answered Sep 05 '17 at 17:59

Looking at the documentation and example you seemed to follow, it looks like you omitted the nav wrapper component Navbar.Collapse which is used for a collapsible navbar. Try adding the component like so:

<Navbar collapseOnSelect>
  <Navbar.Header className="mr-auto">
    <Navbar.Brand>
      <LinkContainer to="/">
        <a>User Management via Redis</a>
      </LinkContainer>
    </Navbar.Brand>
    <Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
    <Nav pullRight>
      <LinkContainer exact to="/">
        <NavItem>Search</NavItem>
      </LinkContainer>
      <LinkContainer to="/users">
        <NavItem>All Users</NavItem>
      </LinkContainer>
    </Nav>
  <Navbar.Collapse />
</Navbar>

Thanks. Unfortunately that does not make a difference (except that when the viewport becomes small, it does collapse the navbar). — Govind Rai, Sep 05 '17 at 18:02

score 0 · Answer 3 · answered Oct 14 '20 at 08:15

0

.text-to-right {
  direction: rtl;
  text-align: right;
}

Tried the above without 100% coverage. I passed a className="text-to-right".

answered Oct 14 '20 at 08:15

ShaMan123

99
4

using pullRight prop overflows right floated nav | React-Bootstrap/React

3 Answers3

Linked