Split menu navigation issues & more

Site URL: https://cricket-helicon-xpw9.squarespace.com/

Hi, 
I'm struggling with a couple of problem with my website
https://cricket-helicon-xpw9.squarespace.com/ (password: draft1)

- I added code to split the menu starting from the menu under the logo option, but now the menu items on the right are on top of the social icons! How can i fix that?

On top of that I added custom icons for the socials in the top menu and added them in the footer as well but I can't see the new custom icons there, only the standard link icon, why?

Thanks for your help!
Alex

 

3 hours ago, Ale_Sav said:

- I added code to split the menu starting from the menu under the logo option, but now the menu items on the right are on top of the social icons! How can i fix that?

What guide did you use to achieve this? I've found that some are better than others at keeping the navigation even around the title. I realise that this is a paid plugin from @WillMyers, but should work much better:

https://www.will-myers.com/products/p/split-navigation

3 hours ago, Ale_Sav said:

On top of that I added custom icons for the socials in the top menu and added them in the footer as well but I can't see the new custom icons there, only the standard link icon, why?

The header social icons are separate from the social block, so need targeting differently. But it does look like you've solved this already?

Hi Ziggy, thanks for your reply!
I tried different free codes and guide for the split menu, this is the one I'm using right now:
 

// SPLIT NAVIGATION

.header-nav {
    position: absolute;
    top: 78px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: -60px!important;
}

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

.header-title-logo a {
    z-index: 1000;
    position: relative;
}

.header-display-desktop .header-title {
    flex: 0 0 40% !important;
    z-index: 999999999;
}

/* Icons to right */
.header-display-desktop {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}
.header-actions.header-actions--left {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

For the custom social icons in the footer I added more code to fix it. 😅

Thanks, I'll try to change those value.
If you have another working free code to split the menu, please let me know! 😅

I haven't tested this one, but it looks well coded:

https://www.stnsvn.com/blog/how-to-make-a-split-navigation-in-squarespace-71

HI, I already tried that code and I can't make it work. The left side doesn't work and the font is so small! Just like in the photo

I tried with your code and it's working!

Thank you so much! 🤩