Hamburger menu problems + Disappearing cart

Hello everyone, 

I'm trying to add code to create a hamburger menu on a website. I am now experiencing two problems and would love for some help. Website: https://livelo.com/

My goal:
To have a Hamburger menu that is on half of the page, so not full screen when you click on it. And to have the shopping-cart visible in the header at all times. 

(See photo attached for problems)
Problem 1:
When creating the hamburger menu, the under categories of the links are becoming visible on the screen. This does not happen when I have it coded for full screen, but only when I try to shorten it. 

Problem 2: 
The shopping-cart has disappeared. And I can't figure out how to get it back. In the first part of the code I have: 
.header-nav, .header-actions {
  display: none;
}
Which you can change to visible, but then you see all of the category links as well. And I only want the cart!


Code used at the moment (full of flaws):

.header-nav, .header-actions {

  display: none;

}

.header-burger {

  display: flex;

}

.header--menu-open .header-menu {

visibility: visible;

  opacity: 1;

}

 

div.header-menu-nav-item:hover div {

    color: #45db84;

}

// CUSTOM HAMBURGER

/* Non-active burger */

.burger-inner:after {

    content: "";

    background-image: url(https://images.squarespace-cdn.com/content/6448dc6e9a1ab06f2f0b09b2/c1ab87d0-513a-4895-bd70-db65144393a3/meny.png?content-type=image%2Fpng);

    background-size: 100px;

    background-repeat: no-repeat;

    background-position: right;

    background-color: transparent !important;

    display: block;

    width: 100px;

    height: 60px;

}

.burger-inner>div {

    display: none !important;

}

/* Burger when active */

body.header--menu-open .burger-inner:after {

    background-image: url(https://images.squarespace-cdn.com/content/6448dc6e9a1ab06f2f0b09b2/c86f223d-ab91-4b51-8bd5-fe5d5bf9a9e5/Screenshot+2024-01-09+at+10.57.19.png?content-type=image%2Fpng) !important;

}

 

Appreciate all and any help! 

Cheers

Don't remove any code in your current code. Use this CSS code to reduce menu width

div.header-menu {
    right: unset;
    width: 30%;
    overflow: hidden;
}

nav.header-menu-nav-list>div:not(:first-child):not(.header-menu-nav-folder--active) {
    visibility: hidden;
}