Hamburger Menu 7.1

Site URL: https://www.sarahduvivier.com

I currently have a hamburger menu on my desktop site but was wondering if instead of taking up the full page I was wondering if there is a custom css code to achieve something like this when you click on the Hamburger button. I want the menu to only take up some of the screen,  not being the full screen if that makes sense. My site is https://www.sarahduvivier.com

 Thanks for the help.

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
.header-menu-nav-folder.header-menu-nav-folder--active {
    width: 50%;
    left: unset;
    right: 0;
}
}