How do I get a button inside a React-Bootstrap Navbar?

Question

So apparently you can't put DOM elements inside the React-Bootstrap Navbar. I want to add a Login button to my site's header. The header is made up of my logo and a React-Bootstrap Navbar component. All my current Navbar children are NavItem components.

I want the login button to be part of the collapsable (hamburger menu) part of the Navbar, but unlike the other NavItems, this button is not meant to be a link that will alter the URL path. When clicked, the login button will just render a React-Bootstrap Modal component.

How do I get the Login button to be a part of my Navbar?

My code...

<Navbar staticTop inverse collapseOnSelect>
   <Navbar.Header>
       <Navbar.Brand id="navbarBrand">
           <img id="logoImg" src="/images/bvLogo.svg" />
       </Navbar.Brand>
       <Navbar.Toggle />
   </Navbar.Header>
   <Navbar.Collapse>
       <Nav pullRight>
           <RouteNavItem className="headerLinks" eventKey={1} href="/">Home</RouteNavItem>
           <RouteNavItem className="headerLinks" eventKey={2} href="/shop">Shop</RouteNavItem>
           <RouteNavItem className="headerLinks" eventKey={3} href="/about">About</RouteNavItem>
           <RouteNavItem className="headerLinks" eventKey={4} href="/cart">Cart</RouteNavItem>
       </Nav>
   </Navbar.Collapse>
</Navbar>
<Button id="loginBtn" onClick={this.open}>Login</Button>

RouteNavItem is a custom component I wrote, but it doesn't have anything to do with the functionality of the Login button.

**** EDIT ****

This is a link to a picture of how I want the header of the site to look... https://s3.amazonaws.com/tylermayberry/Screen+Shot+2017-10-09+at+3.17.34+PM.png

Answer 1

Everything inside <Navbar.Collapse/> component is going to be inside of the hamburger menu.

So you need to add your button inside the collapse component like this:

<Navbar.Collapse>
    <Nav pullRight>
         <RouteNavItem className="headerLinks" eventKey={1} href="/">Home</RouteNavItem>
         <RouteNavItem className="headerLinks" eventKey={2} href="/shop">Shop</RouteNavItem>
         <RouteNavItem className="headerLinks" eventKey={3} href="/about">About</RouteNavItem>
         <RouteNavItem className="headerLinks" eventKey={4} href="/cart">Cart</RouteNavItem>
     </Nav>
     <Navbar.Form pullRight> 
         <Button bsStyle="primary">Login</Button>
    </Navbar.Form>
</Navbar.Collapse>

NOTE: using Navbar.Form for proper alignment