htmlcssreactjsreact-bootstrapreact-router-bootstrap

Making NavItem Background color the same as NavBar

I want my navitem to look like this pic below when clicked or not clicked:

Preferred/Proper implementation

However, it looks like this when clicked:

Improper implementation

I have tried numerous ways of implementing the css properties of the navitem tag to get a background similar as its navbar but have been unsuccessful. Below is my react code and associated css implementation:

//React Code:

      <div className="App">
        <Navbar fluid collapseOnSelect fixedTop>
          <Navbar.Header>
            <Navbar.Brand>
             <img src={store_logo} alt="logo" height="70" width="75"/>
              <Link to="/"><p>StoreName</p></Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav pullRight>
              {this.state.isAuthenticated
                ? <Fragment>
                    <LinkContainer to="/settings">
                      <NavItem>Settings</NavItem>
                    </LinkContainer>
                    <NavItem onClick={this.handleLogout}>Logout</NavItem>
                  </Fragment>
                : <Fragment>
                    <IndexLinkContainer exact to="/about">
                    <NavItem eventKey={1}>About</NavItem>
                    </IndexLinkContainer>
                    <LinkContainer to="/contact">
                      <NavItem eventKey={2}>Contact</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/blog">
                      <NavItem>Blog</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/signup">
                      <NavItem>Signup</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/login">
                      <NavItem>Login</NavItem>
                    </LinkContainer>
                  </Fragment>
              }
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        </div>
//CSS Code:

.App .navbar-brand,
.App .navbar-brand p {
  color: black;
  font-weight: bold;
}

.App .nav {
  font-weight: bold;
  padding-top: 30px;
}

.navbar-default .navbar-nav > li > a {
     color: black;
     background-color: yellow;
     border-color: green;
     background-image: none;
   }

.App nav.navbar.navbar-default.navbar-fixed-top {
    border-color: green;
    background-color: yellow;
    height: 120px;
    color: black;
}

Any idea of what I may be doing wrong / help will be appeciated. Thanks

Solution

  • When you are using a CSS framework and want to redefine a style, you need to override the original styles provided by the framework.

    If you look at the original CSS (search .navbar-default .navbar-navnavbar-nav), you can see

    .navbar-default .navbar-nav > li > a {
  color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333;
  background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #555;
  background-color: #e7e7e7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #555;
  background-color: #e7e7e7;
}

    To override all these, you can put

    .navbar-default .navbar-nav,
.navbar-default .navbar-nav > li > a {
  color: black;
  background-color: yellow;
  border-color: green;
  background-image: none;
}

    Hope this helps.