React-bootstrap navbar doesn't display correctly

Question

My NavBar NavItem displays vertically but I’m trying to display it horizontal. I’m not sure where I messing up. Please let me know if you have any thought on it. Thanks! This is my code:

import React, { Component } from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import './CustomNavbar.css'

export default class CustomNavbar extends Component{
  render(){
    return(
  <Navbar inverse collapseOnSelect>
      <Navbar.Header>
          <Navbar.Brand>
            <Link to='/'>Tsarong </Link>
          </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
      <Navbar.Collapse>

      <Nav>
            <NavItem eventKey={1} href="/">
              Home
            </NavItem>
            <NavItem eventKey={2} href="/main">
              Main
            </NavItem>
            <NavItem eventKey={3} href="/contact">
              Contact
            </NavItem>
            <NavItem eventKey={4} href="/about">
              About
            </NavItem>
            <NavItem eventKey={5} componentClass={Link} to="/topics">
              Topic
            </NavItem>
      </Nav>
      </Navbar.Collapse>
  </Navbar>
    )
  }
}

Thank you so much for your time!

user6080689 · Accepted Answer · 2018-04-09 06:52:02Z

2

<Nav style={{display:"flex", flexDirection:"row"}}>
...
</Nav>

answered Apr 9, 2018 at 6:52

user6080689

Sign up to request clarification or add additional context in comments.

3 Comments

Jampa Thinlay Tsarong Over a year ago

Thanks for your help! It works! I really appreciate your time. Is there any documentation that I can customize the React-bootstrap? Now the height of my Navbar is too large because I having trouble to float the logo to the left and resize the Navbar.Brand.

user6080689 Over a year ago

Here I am using just the CSS. It has nothing to do with React-bootstrap. for some refs: css-tricks.com/snippets/css/a-guide-to-flexbox

user6080689 Over a year ago

developer.mozilla.org/en-US/docs/Web/CSS/… doc drafts.csswg.org/css-flexbox-1/#flex-property

Collectives™ on Stack Overflow

React-bootstrap navbar doesn't display correctly

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related