How To Make The Burger Menu In Mobile Smaller With CSS

Hello,

I am trying to find a CSS to make the burger menu in mobile smaller, much like the edit picture below.

Thank you.

Here's my website

https://www.erinncapko.com/

You mean burger icon size or burger menu items?

With burger icon, you can add this to Website Tools (under Not Linked) > Custom CSS

div.burger-inner>div {
    width: 70% !important;
}

18 hours ago, tuanphan said:

You mean burger icon size or burger menu items?

With burger icon, you can add this to Website Tools (under Not Linked) > Custom CSS

div.burger-inner>div {
    width: 70% !important;
}

 

Hello,

Sorry i meant the burger icon size,

This code only decreases the width, is there not a CSS that keeps the same width but just "minimizes"/"shrinks" the same, so the burger icon is basically the same width and length but just shrink?

So you mean reduce each line (3 lines) height

or space between lines?

On 11/2/2023 at 9:51 PM, tuanphan said:

So you mean reduce each line (3 lines) height

or space between lines?

I guess maybe the space between the lines?

I am just trying make the overall burger icon smaller...can't find a CSS, but have seen it done.   Here's an example

You can see how much smaller it is compared to mine, but it keeps the same width. 

Thanks

11 hours ago, tuanphan said:

Add this code to Website > Website Tools (under Not Linked) > Custom CSS

body:not(.header--menu-open) {
div.burger-inner>div {
    width: 70% !important;
}
.top-bun {
    transform: translatey(-5.5px) !important;
}
.bottom-bun {
    transform: translatey(5.5px) !important;
}
}

Thank you so much!