I’m using react and I came across a side navbar that I like. However I cannot change it from the default red
background colour. I tried making my own custom css, and trying entering className: bg-dark
etc on any line possible and it isn’t working? Can anyone help? Also here is a link to the side where I found this navbar: https://reactjsexample.com/react-side-nav-component/
import React, { Component } from "react"; import { Link } from "react-router-dom"; import { Navbar } from "react-bootstrap"; import SideNav, { Toggle, Nav, NavItem, NavIcon, NavText } from '@trendmicro/react-sidenav'; import '@trendmicro/react-sidenav/dist/react-sidenav.css'; import Routes from "./Routes"; class App extends Component { render() { return ( <div className="App container"> <SideNav onSelect={(selected) => { // Add your code here }} > <SideNav.Toggle /> <SideNav.Nav defaultSelected="home"> <NavItem eventKey="home"> <NavIcon> <i className="fa fa-fw fa-home" style={{ fontSize: '1.75em' }} /> </NavIcon> <NavText> <Link to="/">Scratch</Link> </NavText> </NavItem> <NavItem eventKey="sites"> <NavIcon> <i className="fa fa-fw fa-line-chart" style={{ fontSize: '1.75em' }} /> </NavIcon> <NavText> <Link to="/sites">Sites</Link> </NavText> </NavItem> <NavItem eventKey="tours"> <NavIcon> <i className="fa fa-fw fa-line-chart" style={{ fontSize: '1.75em' }} /> </NavIcon> <NavText> <Link to="/tours">Tours</Link> </NavText> </NavItem> <NavItem eventKey="media"> <NavIcon> <i className="fa fa-fw fa-line-chart" style={{ fontSize: '1.75em' }} /> </NavIcon> <NavText> <Link to="/media">Media</Link> </NavText> </NavItem> <NavItem eventKey="newSite"> <NavIcon> <i className="fa fa-fw fa-line-chart" style={{ fontSize: '1.75em' }} /> </NavIcon> <NavText> <Link to="/newSite">Add new Site</Link> </NavText> </NavItem> <NavItem eventKey="profile"> <NavIcon> <i className="fa fa-fw fa-line-chart" style={{ fontSize: '1.75em' }} /> </NavIcon> <NavText> <Link to="/profile">Profile</Link> </NavText> </NavItem> </SideNav.Nav> </SideNav> <Routes /> </div> ); } } export default App;
Advertisement
Answer
Try this
.sidenav---_u0En{ background: yourcolor }
if it still doesn’t work add !important
OR
your code doesn’t work most likely because you are using background-color
try changing it to background