Topic: MDBDropdownToggle title not displaying in hamburger menu
caseydev free asked 3 years ago
Expected behavior: Using the hamburger menu, the dropdown title will display
Actual behavior: While dropdown menu still works, the title disappears on smaller screens
Resources (screenshots, code snippets etc.)
Here is my code:
import React, { Component } from 'react';
import {
MDBContainer,
MDBNavbar,
MDBNavbarBrand,
MDBNavbarNav,
MDBNavItem,
MDBNavLink,
MDBNavbarToggler,
MDBCollapse,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBDropdownItem,
MDBIcon,
} from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';
class NavbarPage extends Component {
state = {
isOpen: false,
};
toggleCollapse = () => {
this.setState({ isOpen: !this.state.isOpen });
};
render() {
return (
<MDBNavbar color='blue lighten-1' dark expand='md'>
<MDBContainer>
<MDBNavbarBrand href='/'>
<strong className='white-text'>PBRF</strong>
</MDBNavbarBrand>
<MDBNavbarToggler onClick={this.toggleCollapse} />
<MDBCollapse id='navbarCollapse3' isOpen={this.state.isOpen} navbar>
<MDBNavbarNav right>
<MDBNavItem>
<MDBDropdown>
<MDBDropdownToggle nav caret>
//Doesn't appear on smaller screens
<div className='d-none d-md-inline'>Phage Therapy</div>
</MDBDropdownToggle>
<MDBDropdownMenu className='dropdown-default'>
<MDBDropdownItem href='/phagetherapy/bio'>
What is it?
</MDBDropdownItem>
<MDBDropdownItem href='/phagetherapy/resources'>
Resources
</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavItem>
<MDBNavItem>
<MDBDropdown>
<MDBDropdownToggle nav caret>
//Doesn't appear on smaller screens
<div className='d-none d-md-inline'>About Us</div>
</MDBDropdownToggle>
<MDBDropdownMenu className='dropdown-default'>
<MDBDropdownItem href='/about/board'>
Board Of Directors
</MDBDropdownItem>
<MDBDropdownItem href='/about/sab'>
Scientific Advisory Board
</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to='/donate'>Donate</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to='/contact'>Contact</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
);
}
}
export default NavbarPage;
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 5.0.1
- Device: Laptop
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: No
Piotr Glejzer staff commented 3 years ago
so do you want to still appear this tittle?