Left Menu – Middle Logo – Right Menu

#1. Change header layout to Left Menu – Middle Logo like below

#2. Paste this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().appendTo('.header-display-desktop .header-actions.header-actions--right');
})
</script>

This code will duplicate the Left Menu and add it to the Right Menu, and you will have.

 

#3. Paste this code to Custom CSS Box 

/* Hide item 1, 2 from right menu */
.header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+2) {
    display: none;
}
/* Hide item 3, 4 from left menu */
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+3) {
    display: none;
}
/* add space between item 3, 4 in right menu */
  .header-nav-item:nth-child(n+3) {
    margin-right: 1.5vw;
}

This code will hide items 3, 4 from the Left Menu.

And hide items 1, 2 from the Right Menu.

And add space between items 3, 4 in the Right Menu

You will have

#4. To fix the right menu disappearing on other pages, you can use this code to Custom CSS Box 

/* Fix right menu disappear on other pages */
.header-nav-item a {
    opacity: 1 !important;
}

#5. To move the menu closer logo, paste this code to the Custom CSS Box 

/* Move menu closer logo */
.header-actions.header-actions--right {
    justify-content: flex-start !important;
}
.header-nav-wrapper {
    text-align: right;
}
.header-nav nav.header-nav-list>div {
    margin-right: 0 !important;
    margin-left: 2.7vw !important;
}