Change Top NavBar text and chevron colors


Topic: Change Top NavBar text and chevron colors

gllermaly asked 6 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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
Related topics