Is there a way to turn my header menu into an expandable menu on overflow? Dawn Theme

[eitanj]

When my website gets thinner (width wise) but not thin enough to turn "mobile mode,’ the header menu just smushes on top of eachother.

is there a way to have it so that as soon as that would happen, it instead becomes a menu like this?

My goal here is to have this:

Turn into this:

but ONLY when the different menu options would have to stack on top of one another.

Thanks so much!!

[Ujjaval]

@eitanj

@media screen and (min-width: 990px){
.header--top-center>.header__search, .header:not(.header--top-center) *>.header__search {display: none !important;}
.header:not(.header--middle-left) .header__inline-menu { display: none !important;}
.header--top-center *>.header__search, .header:not(.header--top-center)>.header__search { display: inline-flex !important;}
header-drawer {display: block !important;}
}

nav.header__inline-menu {
    display: none !important;
}

put below code into your base.css file

[eitanj]

This Half-worked, now its only showing up as the expandable menu, i assume it has something to do with the minimum width? I want the minimum width to be as soon as the text would stack, it becomes the expandable menu.

Thanks for the quick response!

[Ujjaval]

@eitanj
you want like this ?

Then add below css

div#menu-drawer {
    width: 20% !important;
    height: 800px !important;
}

[eitanj]

No, Im saying i dont want it to only be a menu drawer, i want it to be a normal header when the webpage allows the space for it, and then when it gets too small, for it to change to a menu drawer.

[eitanj]

hey are you able to help me with this still?