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}

Add comment

Jakub Mandra staff premium answered 6 years ago

0 0 Best answer

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

Add comment

Jakub Mandra staff premium answered 6 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

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

About author

Wasserman

Pro User

0Support score
3Questions 0Answers

0Snippets likes 0Snippets