Change size of hamburger icon


Topic: Change size of hamburger icon

mental_balloon asked 5 years ago

I'm trying to change the size of the hamburger icon for the react bootstrap hamburger menu. I need to use 'vw'. This is what I have so far:

import React, { Component } from 'react';
import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink,             MDBCollapse, MDBContainer,
MDBHamburgerToggler } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';

class Navbar extends Component {
state = {
  collapse1: false,
  collapseID: ''
}

toggleCollapse = collapseID => () => {
  this.setState(prevState => ({ collapseID: (prevState.collapseID !== collapseID ? collapseID :         '') }));
}

toggleSingleCollapse = collapseId => {
  this.setState({
    ...this.state,
    [collapseId]: !this.state[collapseId]
  });
}

render() {
  const hamburgerWidth = { width: '1vw' }
  return (
    <Router>
      <MDBContainer>
        <MDBNavbar className="w-100" color="black" style={{ marginTop: '0vw' }} light>
          <MDBContainer >
            <MDBNavbarBrand style={{ color: 'white', fontSize: '4vw'}}>
              Select Page
            </MDBNavbarBrand>
            <MDBHamburgerToggler style={hamburgerWidth} color="#EF542A" id="hamburger1"         onClick={()=> this.toggleSingleCollapse('collapse1')} />
              <MDBCollapse isOpen={this.state.collapse1} navbar>
                <MDBNavbarNav center style={{backgroundColor: 'white'}}>
                  <MDBNavItem active>
                    <MDBNavLink style={{ color: 'white' }} to="#!">Home</MDBNavLink>
                  </MDBNavItem >
                  <MDBNavItem >
                    <MDBNavLink style={{ color: 'white'}} to="#!">Link</MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem >
                <MDBNavLink to="#!" style={{ color: 'white'}}>Profile</MDBNavLink>
              </MDBNavItem>
            </MDBNavbarNav>
          </MDBCollapse>
      </MDBContainer>
    </MDBNavbar>
  </MDBContainer>
</Router>
);
  }
}

export default Navbar;

This however does not work. Any help would be greatly appreciated.


Jakub Chmura staff premium answered 5 years ago

Hi, @mental_balloon

You can change the size of the hamburger menu icon in a few different ways. Overwrite style of span line ( #nav-icon1 span:nth-child(3)). You can use also transform: scale().

But when I look at your code I saw that you use vw as a font-size value. This is very bad practice and just imagine that someone is watching your site on 32 inches display with 4k resolution.

Best, Kuba


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: 4.25.4
  • Device: none
  • Browser: chome
  • OS: macOS Catalina
  • Provided sample code: No
  • Provided link: No