How to widen menu drawer

[projectthirteen]

Does anyone know to how extend the width of a drawer menu when open?

Im currently using the spotlight theme.

See a reference below…

URL: https://project-thirteen.com.au

[GTLOfficial]

Hello @projectthirteen Please provide the password of your store.

[projectthirteen]

projectthirteenpassword

[GTLOfficial]

Hello @projectthirteen

Step 1: Go to Shopify Admin ----------------> Online Store ----------->Theme ---------------> Edit code------------> find “base.css” file and go to line number 3613
replace this code

div#menu-drawer {
    width: 20vw !important;
}

with this one

div#menu-drawer {
    width: 30vw !important;
}

Please let me know if you have any question

Thanks

[projectthirteen]

Can you make it only applicable for desktop view as it changes the mobile view as well.

[GTLOfficial]

Hello @projectthirteen
then replace with this one

@media screen and (min-width: 750px){
div#menu-drawer {
    width: 30vw !important;
}
}

[projectthirteen]

Thanks heaps, do you know how to increase its height (so it covers the header as well) see the reference below.

would be greatly appreciated, have been trying to solve this problem for weeks

[GTLOfficial]

Go to ----------------------- this file “component-menu-drawer.css” find this CSS

.menu-drawer {
    position: absolute;
    transform: translate(-100%);
    visibility: hidden;
    z-index: 3;
    left: 0;
    top: 100%;
    width: 100%;
    padding: 0;
    background-color: rgb(var(--color-background));
    overflow-x: hidden;
    filter: drop-shadow(var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius) rgba(var(--color-shadow), var(--drawer-shadow-opacity)));
}

and replace with this one

.menu-drawer {
    position: absolute;
    transform: translate(-100%);
    visibility: hidden;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    padding: 40px 0 0 0;
    background-color: rgb(var(--color-background));
    overflow-x: hidden;
    filter: drop-shadow(var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius) rgba(var(--color-shadow), var(--drawer-shadow-opacity)));
}

Step 2:-

Go to this file “component-menu-drawer.css”

find this CSS:-

.header__icon--menu {
    position: initial;
  }

and Replace with this one

.header__icon--menu {
    position: initial;
    z-index: 9;
}

Please let me know if you have any questions

Thanks
if you like my solution please Give me a like and accept the solution

[projectthirteen]

Thanks @GTLOfficial but when on my shop page it seems to stop at the footer (see the reference below)

It seems to only be an issue on desktop view, is it possible to fix this?