Hamburg Menu - CSS for adjusting

Hi,

I am looking for a free Code/Plugin to adjust the Hamburger Menu. 
I'd love to have a menu that does not cover the whole screen on desktop (if forced on desktop) but pops up just on one side like here: https://www.rosanbosch.com 

Is this even possible on Squarespace 7.1? 

I am thankful for any help!

This is the code I used: The only issue I have is that when I click on the submenu,  the menu rolls to the left and you can still see the grey lettering over the images on the website. If you find a fix, I'd love to know what it is. 

//hamburger menu on desktop
/* 768 for tablet - desktop - 992 for desktop */
//hamburger menu on desktop

.header-burger { display:flex!important}
.header--menu-open .header-menu 
{opacity: .9!important;
  visibility: visible!important; 
  top: 0%; 
  left: 75%; }
.header-nav, .header-actions {visibility:hidden!important}

//media text resize
@media screen and (max-width: 960px) {
.header-menu-nav-item a {
    font-size: 24px!important;
  line-height: 24px!important;
  text-align: center!important;
 color: #000000;
  padding-left:40px;}
}

.header-menu-nav-item a {
    font-size: 28px;
  line-height: 24px;
  text-align: left;
 color: #000000;
  padding-left:40px;
}

.burger-box div {
    display: visible;
    width: 50px;
    height: 32px;
    color: #ffffff!important;
    visibility: visible;
  
  .burger-box div {
    display: none;
}
.burger-box {
    background-image: url(https://image.flaticon.com/icons/svg/876/876207.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
 

Thank you for your help (just read it today). I have the same issue with the grey lettering but will work on that and let you know asap if I‘ll find a solution! Enjoy your weekend!

@Lano do you have a link to the site?