How to split navigation menu with the logo in the middle

hopefully someone can help me, I'm looking to split the navigation menu, meaning I want 3 menu items on the left, then the logo in the middle and then 3 menu items on the right, is that possible?

You can follow this

THANK YOU SO MUCH! For the most part, I got it work, just two small issues on the menu to right of the logo. 1. the menu is uneven and sits higher than the left side 2. one of my menu items is Dropdown folder, instead of hiding the dropdown it is now displaying the 2 other pages in the dropdown below. Any pointers on how to adjust it? Thank you!

With dropdown, try this code under

<style>
/* Fix dropdown */
.header-actions--right .header-nav-folder-content {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: auto;
    left: auto;
    padding: .5em 1em;
    text-align: left;
    width: 200px;
    z-index: 10;
    margin-left: -1em;
}
.header-actions--right a.header-nav-folder-title {
    text-decoration: none;
    backface-visibility: hidden;
    padding: .1em 0;
}
.header-actions--right .header-nav-item--folder:hover .header-nav-folder-content {
    opacity: 1;
    pointer-events: auto;
}
</style>

With uneven, you need to share url, I can check easier