Change hamburger icon appearance

So as we know the navmenu default hamburger icon looks like this;
Screen Shot 2023-11-16 at 10.49.10 pm

I am wondering if its possible to make it look like the following;
pic1:

pic2:

I cant find any settings to do it so can some CSS make this happen o is it a whole other world of stuff outside bricks altogether, ive seen other wordpress sites have hamburger icons that look pic1 and pic2.

Thanks.

Yes. Using css, you can do.

my css

%root%:not(.show-mobile-menu) .bricks-mobile-menu-toggle .bar-center {
    width: 30px !important;
    right: 10px;
  }

%root%:not(.show-mobile-menu)  .bricks-mobile-menu-toggle .bar-top {
    top:-5px;
  }

%root%:not(.show-mobile-menu)  .bricks-mobile-menu-toggle .bar-bottom {
    top:20px;
  }
.bricks-mobile-menu-toggle span {
  height: 3px;
}

.bricks-mobile-menu {padding:20px 0px 50px 0px;}

ah thanks, i always thought it was some fontawesome icon thing or .svg or something.

what about putting some kind of solid border around it? ive dried all that and it doesn’t work. I think maybe because the default size has been modified or something

It may be easier to use the widget " Nav (Nestable) " . There is an option to change the icon.

@clickfusion63

In my case, the width isn’t changing by “width: 30px” property. I want to change the hamburger width. what could be the issue, please?

You may need to update your browser cache

better late than never. Here’s another way to make the hamburger icon bigger :slight_smile:

.bricks-mobile-menu-toggle {
  transform: scale(2);
}