CODEWITHSUNDEEP
reactjsreactstrap
George Young
George Young

Reputation: 41

Collapse navbar sooner then 576px

I use the navbar below, and I want it to collapse at 768px. I tried using css, however I break the module if I force any display property onto <Collapse />.

<Navbar fixed={`top`} inverse toggleable className={"navfix bg-brown"} >
      <NavbarToggler right onClick={this.toggle} className=""/>
      <NavbarBrand href="/" className={'mx-auto'}><br /><div className="text-center logo">
        <img className="logoImg" src={"../pictures/brand/brand.png"} alt="B54 Cafe, Bistro & Bakery"/>
      </div></NavbarBrand>
    <Collapse isOpen={this.state.isOpen} navbar className={"toggler "}>
        <Nav className="ml-auto" navbar>
          <div className="static">
            <NavItem>
              <NavLink to={'/'} exact activeClassName="active" tag={RRNavLink}>Homepage</NavLink>
            </NavItem>
            <NavItem>
              <NavLink to={'/about'} activeClassName="active" tag={RRNavLink}>About</NavLink>
            </NavItem>
          </div>
          {Object.keys(this.props.meals).map((types, index) =>
            <NavItem key={types+index}>
              <NavLink
                to={'/'+types.normalize('NFD').replace(/[\u0300-\u036f]/g, "")} activeClassName="active" tag={RRNavLink}>
                {types}
              </NavLink>
            </NavItem>
            )
          }
        </Nav>
      </Collapse>
    </Navbar>

How do you solve this problem in reactstrap? If you think I should consider other aproaches, I am all ears. Here is a github page about the project, you can see how the navbar collapses and how reactstrap applies css onto "navbar-collapse" before 576px, and how the display: flex!important; is applied by bootstrap after 576px. If I force a display property onto "collapse" or "navbar-collapse". I ovverride the css reactsrap applies so I break the module. I don`t want to rewrite bootstrap.min.css and I am looking for alternatives. githubPage from the website

Thank you!

Upvotes: 1

Views: 143

Answers (1)

George Young
George Young

Reputation: 41

Luckily I got an answer from TheSharpieOne on reactstrap's github. If you want to change the breakpoint from xs (which is the default when you use toggleable on Navbar) to something else (like sm) you can provide the breakpoint you want:

<Navbar toggleable="sm">
  // ...
</Navbar>

Upvotes: 1

Related Questions