Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Change size of hamburger icon

mental_balloon free asked 4 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 answered 4 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

  • ForumUser: 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