React navbar color when collapsed


Topic: React navbar color when collapsed

Wasserman pro asked 6 years ago

How do i change my navbar background color when collapse? <Navbar dark expand="md" fixed="top" scrolling> <Container> <NavbarBrand> <strong className="white-text">MDB</strong> </NavbarBrand> <NavbarToggler onClick = { this.onClick } /> <Collapse isOpen = {this.state.collapse} navbar> <NavbarNav left> <NavItem active> <NavLink to="#!">Home</NavLink> </NavItem> <NavItem> <NavLink to="#!">Link</NavLink> </NavItem> <NavItem> <NavLink to="#!">Profile</NavLink> </NavItem> </NavbarNav> <NavbarNav right > <NavItem> <FormInline waves> <div className="md-form my-0"> <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"/> </div> </FormInline> </NavItem> </NavbarNav> </Collapse> </Container> </Navbar> { this.state.collapse && overlay}

Jakub Mandra staff premium answered 6 years ago

Hello,
TO change navbar color you have to add property 'color':

color="indigo"

If you want to dynamicaly change color of your navbar you have to store your color in state.
For example:

this.state = {
  collapse: false,
  isWideEnough: false,
  color: 'indigo'
}

onClick() {
  this.setState({
    collapse: !this.state.collapse,
    color: 'default'
  });
}

<Navbar color={this.state.color} dark expand="md" scrolling>

Hope i helped.
Best regards
Jakub from MDB


Wasserman pro commented 6 years ago

Hey Jakub, thanks ir did help change the color when click, but I am looking to change the navbar when scrolling as you can see in this great demo https://mdbootstrap.com/previews/docs/latest/html/intros/intro-app.html At first the navbar is transparnt and when scrolling down it changes it's color to indigo can you please explian how to change it so when scroll it will be red for example? I try changing the css class .navbar:not(.top-nav-collapse) with and without !important did not work Thank you for your help

Jakub Mandra staff premium answered 6 years ago

Ah I see, my solution is simple, add this to your custom css:
.navbar.scrolling-navbar.top-nav-collapse {
  background: #ff0000;
}
'top-nav-collapse' is added to the navbar while scroll, so you just need to describe which color you want. And we need to remember about specificity here. This should do the work. Also we want to implement better solution in future release. Stay tuned! Best regards, Jakub from MDB
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: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No