Topic: Change Top NavBar text and chevron colors
Hello, how can I change the navbar text and icon colors? I achieved it overriding with font color but chevron is not changing, I would like the same styles but white text instead of black text
Thanks!
Jakub Mandra staff premium answered 6 years ago
If you want to set color of text in your navbar to white, just add dark
like so:
<MDBNavbar dark>
.
Extended example:
<MDBNavbar color="default-color" dark expand="md" style={{marginTop: "20px"}}>
<MDBNavbarBrand>
<strong className="white-text">MDBNavbar</strong>
</MDBNavbarBrand>
<MDBNavbarToggler onClick={this.toggleCollapse("navbarCollapse3")} />
<MDBCollapse id="navbarCollapse3" isOpen={this.state.collapseID} navbar>
<MDBNavbarNav left>
<MDBNavItem active>
<MDBNavLink to="#!">Home</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#!">Features</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#!">Pricing</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBDropdown>
<MDBDropdownToggle nav caret>
<div className="d-none d-md-inline">MDBDropdown</div>
</MDBDropdownToggle>
<MDBDropdownMenu className="dropdown-default"right>
<MDBDropdownItem href="#!">Action</MDBDropdownItem>
<MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
<MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
<MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavItem>
</MDBNavbarNav>
<MDBNavbarNav right>
<MDBNavItem>
<MDBNavLink className="waves-effect waves-light" to="#!"><MDBIcon brand icon="twitter" /></MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink className="waves-effect waves-light" to="#!"><MDBIcon brand icon="google-plus" /></MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBDropdown>
<MDBDropdownToggle nav caret>
<MDBIcon icon="user" />
</MDBDropdownToggle>
<MDBDropdownMenu className="dropdown-default" right>
<MDBDropdownItem href="#!">Action</MDBDropdownItem>
<MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
<MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
<MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBNavbar>
Best,
Jakub
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.8.4
- Device: PC
- Browser: Chrome
- OS: Ubuntu 16
- Provided sample code: No
- Provided link: No