Logo & Navigation - Customisation - Z

https://mjfc-temp.squarespace.com/

I'm using split nav to balance things out:

/*Make split navigation*/
.header-nav {
    position: absolute;
    top: 40px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: -10px!important;
    z-index: 9999999;  
}

.header-nav-item:nth-of-type(3) {
    margin-right: 230px!important;
}

.header-title {
    position: relative;
    z-index: 999999;
}

Any thoughts on being able to have both sides of my nav AND my logo properly clickable?

I'm guessing I need to somehow customer my left and right sides of my nav so they don't go through / behind the logo based on z-index values..

Thank you @tuanphan! I really need to get my css 🧠 up to scratch.