Topic: Navbar Dropdown is not working in colapsed mode

arooly pro asked 5 years ago


Hi,

I am using the example from: https://mdbootstrap.com/docs/react/navigation/navbar/

Basic Example.

Hamburger Menu works only for level one, Dropdown is not working in collapsed mode.

To test just use the Basic Example Code on your page.


Anna Morawska staff answered 5 years ago


Ok, great, thank you for reporting the bug, we've already fix this in the docs.


arooly pro answered 5 years ago


Hi Ana thank you for the prompt answer, your fix solves the problem

I am using MDBreact 4.9 from my date is 25/01/2019 in the recommended implementation the title didn't show up:


                  <MDBDropdownToggle nav caret>
                    <div className="d-none d-md-inline">MDBDropdown</div>

Your fix work using "span" instead of "div" solved the problem.

            <MDBDropdownToggle nav caret>
              <span className="mr-2">Dropdown</span>


Grf free answered 5 years ago


Are you aware that the dropdown menu also doesn't work in the jQuery pro version. Please check Dropdown menu jQuery


Anna Morawska staff answered 5 years ago


Hi arooly,

could you explain more fully, what do you mean "Hamburger Menu works only for level one" ?

Refering to the dropdown issue, please try this code:

import React, { Component } from "react";
import {
  MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBFormInline,
  MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem
} from "mdbreact";

class NavbarPage extends Component {
  state = {
    isOpen: false
  };

  toggleCollapse = () => {
    this.setState({ isOpen: !this.state.isOpen });
  }

  render() {
    return (
      <MDBNavbar color="indigo" dark expand="md">
        <MDBNavbarBrand>
          <strong className="white-text">Navbar</strong>
        </MDBNavbarBrand>
        <MDBNavbarToggler onClick={this.toggleCollapse} />
        <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} 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>
                  <span className="mr-2">Dropdown</span>
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <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>
              <MDBFormInline waves>
                <div className="md-form my-0">
                  <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                </div>
              </MDBFormInline>
            </MDBNavItem>
          </MDBNavbarNav>
        </MDBCollapse>
      </MDBNavbar>
    );
  }
}

export default NavbarPage;

Anna Morawska staff answered 5 years ago


Hi there,

thank you for reporting this - we will try to fix this before the next release.

Best, Ania



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.8.4
  • Device: PC
  • Browser: Chrome, Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes