React bootstrap nav-bar styling

Question

I am trying to figure out how can I apply styling to a react bootstraps NavBar. Added jsfiddle here. https://jsfiddle.net/pdqzju1e/1/ Having some issue in running the jsfiddle with react-bootstrap. Works on my locally set up environment.

const navbar = {backgroundColor: '#F16E10'};
export default class NavigationBar extends React.Component {
  render() {
    return (
      <div>
        <Navbar style={navbar}>
          <Navbar.Header>
            <Navbar.Brand>
              <a href="/">Test App</a>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav style={navbar}>
              <NavItem eventKey={1} href="#">Link1</NavItem>
              <NavItem eventKey={2} href="#">Link2</NavItem>
            </Nav>
            <Nav pullRight>
              <NavItem eventKey={1} href="#">Link3</NavItem>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    );
  }
}

The above only seems to work for Nav component and not NavBar. Is there any workaround for this?

Answer 1

Hey Akshay you can target the navbar-header class to override its css attributes. Here's a jsBin demo.

.navbar-header {
  background-color: #F16E10;
}

If that did the trick for you then I'd recommend playing around with Chrome's devtools: inspecting elements and changing their styles to see which css classes you'd want to target.

Answer 2

<Navbar
        fixedTop
        style={{backgroundSize: "0", backgroundColor: "#A92117"}}
      >

The above is the trick I used in my project. It changes the color to red.

Answer 3

you can change the color of MenuItem or NavItem here

 .navbar-default .navbar-nav > li > a {
      color: white;
    }

Basic trick is going to dev-tool and check the css properties and you can do anything.

Answer 4

The problem for me was that background-image was being set to a linear-gradient in one of bootstraps stylesheets. background-image was taking precedence over background-color. Overriding that using the following worked for me:

/* override bootstrap navbar colors */
.navbar,
.navbar-default {
    background-image: linear-gradient(to bottom,#2c4053 0,#2c4053 100%) !important; /* override background image gradient w/ flat color */
}

I believe this should have also worked, but it did not for me.

.navbar,
.navbar-default {
    background-image: none !important;
}

Im sure there is a much better way of accomplishing this however...