Hamburger Icon Not Visible (Still Clickable)


Topic: Hamburger Icon Not Visible (Still Clickable)

Kiko Estrada asked 3 years ago

Expected behavior

  • (1) Navbar items collapse into hamburger menu
  • (2) Hamburger icon is visible & can be clicked
  • (3) When icon is clicked, navbar items are displayed

Actual behavior

  • (1) Navbar items collapse into hamburger menu
  • (2) No visible hamburger menu is displayed
  • (3) When whitespace is clicked, navbar items are displayed

Resources (screenshots, code snippets etc.)

import React, { Component } from 'react';
import { LightLogo } from '../Illustration/LightLogo';
import Globe from '../../images/Globe.svg';
import Router from 'next/router';
import Link from 'next/link';
import { NavWrapper } from './HeaderStyles';

import {
  MDBNavbarBrand,
  MDBIcon,
  MDBNavbar,
  MDBNavbarNav,
  MDBNavItem,
  MDBNavbarToggler,
  MDBCollapse,
  MDBDropdown,
  MDBDropdownToggle,
  MDBDropdownMenu,
  MDBDropdownItem } from 'mdbreact';

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    };
  }

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

  render() {
    return (
        <NavWrapper>
          <MDBNavbar expand='lg' className='pl-5 pr-5'>
            <MDBNavbarBrand className='pr-5'>
              <Link href='/'>
                <a><LightLogo width='40px' height='36px' /></a>
              </Link>
            </MDBNavbarBrand>
            <MDBNavbarToggler onClick={this.toggleCollapse} />
            <MDBCollapse id='navbarCollapse3' isOpen={this.state.isOpen} navbar>
              <MDBNavbarNav left>
                <MDBDropdown>
                  <MDBDropdownToggle nav>
                    <span className='mr-2'>Insurance <MDBIcon icon='angle-down' className='ml-1 nav-caret-icon'/></span>
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <Link href='/'>
                        <a>Home</a>
                      </Link>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
                <MDBDropdown>
                  <MDBDropdownToggle nav>
                    <span className='mr-2'>Technology <MDBIcon icon='angle-down' className='ml-1 nav-caret-icon'/></span>
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <Link href='/'>
                        <a>Home</a>
                      </Link>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
                <MDBDropdown>
                  <MDBDropdownToggle nav>
                    <span className='mr-2'>Services <MDBIcon icon='angle-down' className='ml-1 nav-caret-icon'/></span>
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <Link href='/'>
                        <a>Home</a>
                      </Link>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
                <MDBDropdown>
                  <MDBDropdownToggle nav>
                    <span className='mr-2'>About <MDBIcon icon='angle-down' className='ml-1 nav-caret-icon'/></span>
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <Link href='/'>
                        <a>Home</a>
                      </Link>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </MDBNavbarNav>
              <MDBNavbarNav right className='d-flex align-items-center justify-content-center'>
                <MDBNavItem className='d-flex align-items-center mr-4 pr-1'>
                  <div className="help-nav-link-text pr-1">Cyber incident?</div>
                  <Link href='#!'>
                    <a id='help-nav-link'>Get Help</a>
                  </Link>
                </MDBNavItem>
                <MDBNavItem className="align-items-center">
                  <Link href='#!'>
                    <a id='login-nav-link'>Log In</a>
                  </Link>
                </MDBNavItem>
                  <MDBDropdown dropleft>
                  <MDBDropdownToggle nav>
                    <img
                        height='18px'
                        width='18px'
                        src={Globe}
                        loading='lazy'
                        alt='USA Flag'
                    />
                    <MDBIcon icon='angle-down' className='ml-2 nav-caret-icon'/>
                  </MDBDropdownToggle>
                    <MDBDropdownMenu>
                      <MDBDropdownItem>
                        <Link href='#'>
                          <a className='nav-link'>U.S.</a>
                        </Link>
                      </MDBDropdownItem>
                      <MDBDropdownItem divider />
                      <MDBDropdownItem>
                        <Link href='#'>
                          <a className='nav-link'>Canada</a>
                        </Link>
                      </MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
              </MDBNavbarNav>
            </MDBCollapse>
          </MDBNavbar>
        </NavWrapper>
    );
  }
}

export default Header;

Krzysztof Wilk staff commented 3 years ago

Thanks for reporting this issue. We'll look closer on it before the next release :)

Keep coding!


Kiko Estrada commented 3 years ago

Any suggestions for possible fixes?


Anyone ever experience this issue? Wondering if there was some kind of workaround I could try here


Krzysztof Wilk staff commented 3 years ago

Hi!

I found a problem. You have to remove the expand='lg' property from the MDBNavbar component :)

Keep coding!


Collin Banks commented 3 years ago

Hello! Thanks for taking the time to propose a solution here. I removed the property and now the navbar only shows the brand logo, and none of the actual nav items. When I shrink the width of the navbar, I can see a pointer cursor when I hover over the top right corner of the webpage but still no actual hamburger icon. I can only see the nav items when I click on the invisible button.. So, I feel as though the problem has only worsened with the proposed solution but I appreciate your suggestion -- hope this issue get's resolved quickly. Thanks again!


Collin Banks commented 3 years ago

After some experimentation, I realized that if you add a custom MDBNavbarToggler image the issue goes away entirely but only if you re-add the expand='lg' property to the MDBNavbar component. Hopefully this helps, cheers!


Krzysztof Wilk staff commented 3 years ago

Glad you've managed it! If you have more questions - feel free to ask :)

Keep coding!


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: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB4 5.0.1
  • Device: Macbook Pro
  • Browser: Google Chrome
  • OS: OS X
  • Provided sample code: No
  • Provided link: No