Change hamburger icon appearance

How To
1

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.

2

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;}
3

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

4

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

5

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

6

@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?

7

You may need to update your browser cache

8

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

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