Remove Squarespace Navigation completely and replace it with Custom Code?

Hi guys! I was wondering if it is at all possible (without the use of developer mode) to remove the entire Squarespace navigation and replace it with custom code. I have created custom code that I like better but I am not sure how to go about changing it. 

Thanks a lot in advance.

Well very generally you could do a couple of things.

One would be to remove SS navigation through Javascript. Then add your custom code to Settings > Advanced > Code Injection > FOOTER to add your menu in.

Alternately you could add some CSS to hide the SS built-in nav and then add your custom code in.

For us to be more helpful please post the URL to your site.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

If you could post your custom menu code we might be able to tell where you are currently and possibly suggest what to do next.

27 minutes ago, creedon said:

Well very generally you could do a couple of things.

One would be to remove SS navigation through Javascript. Then add your custom code to Settings > Advanced > Code Injection > FOOTER to add your menu in.

Alternately you could add some CSS to hide the SS built-in nav and then add your custom code in.

For us to be more helpful please post the URL to your site.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

If you could post your custom menu code we might be able to tell where you are currently and possibly suggest what to do next.

Thank you so much! The URL : https://atanasmalamov.com 

I was following a tutorial recreating Apple's navigation.

The result is :

HTML:

<header>
<div class="container">
<nav class="nav">
<ul class="nav-list nav-list-mobile">
<li class="nav-item">
<div class="mobile-menu">
<span class="line line-top"></span>
<span class="line line-bottom"></span>
</div>
</li>
<li class="nav-item">
    <a href="index.html" class="nav-link nav-link-apple"></a>
</li>
<li class="nav-item">
    <a href="#" class="nav-link nav-link-bag"></a>
</li>
</ul>
<!--/nav-list nav-list-mobile-->
<ul class="nav-list nav-list-larger">
<li class="nav-item nav-item-hidden">
    <a href="index.html" class="nav-link nav-link-apple"></a>
</li>
<li class="nav-item">
    <a href="#" class="nav-link">Mac</a>
</li>
<li class="nav-item">
    <a href="#" class="nav-link">Ipad</a>
</li>
<li class="nav-item">
    <a href="#" class="nav-link">iPhone</a>
</li>
<li class="nav-item">
    <a href="#" class="nav-link">Watch</a>
</li>
<li class="nav-item">
    <a href="#" class="nav-link">Tv</a>
</li>
<li class="nav-item">
    <a href="#" class="nav-link">Music</a>
</li>
<li class="nav-item">
    <a href="#" class="nav-link">Support</a>
</li>
<li class="nav-item">
    <a href="#" class="nav-link nav-link-search"></a>
</li>
<li class="nav-item nav-item-hidden">
    <a href="#" class="nav-link nav-link-bag"></a>
</li>
</ul>
<!--/nav-list nav-list-larger-->
</nav>
</div>
</header>

CSS:

/*CSS*/
*,
*::before,
*::after{
margin:0;
padding: 0;
}

html{
font-size:10px;
}

a{
display:block;
text-decoration: none;
}

.container{
max-width: 98rem;
margin: 0 auto;
padding: 0 2.2rem;
}

header{
position:fixed;
top: 0;
z-index: 1400;
width:100%;
height: 4.4rem;
background-color: rgba(0, 0, 0,.8);
backdrop-filter: blur(2rem);
}

.nav-list{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -1rem;

}

.nav-list-mobile{
display: none;
}

.nav-link{
font-size: 1.4rem;
color: white;
padding: 0 1rem;
transition: opacity .5s;
}

.nav-link:hover{
opacity: .7;
}
.nav-link-apple{
width: 1.6rem;
height: 4.4rem;
background: url("./icons/apple.svg") center no-repeat;
}
.nav-link-search{
width: 1.6rem;
height: 4.4rem;
background: url("./icons/search.svg") center no-repeat;
}
.nav-link-bag{
width: 1.4rem;
height: 4.4rem;
background: url("./icons/bag.svg") center no-repeat;
}
@media screen and (max-width: 767px){
header{
height: 4.8rem;
transition: background .36 cubic-bezier(0.32, 0.08, 0.24, 1),
            height .56 cubic-bezier(0.32, 0.08, 0.24, 1);
}
header .container{
padding: 0;
}
.nav-list{
margin-top: 0;
}
.nav-list-mobile{
display: flex;
}
.nav-item{
width: 4.8rem;
height: 4.8rem;
display: flex;
justify-content: center;
}
.nav-item-hidden{
display: none;
}
.mobile-menu{
position: relative;
z-index: 1500;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.line{
position: absolute;
width: 1.7rem;
height: 1px;
background-color: white;
transition: margin-top .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
.line-top{
margin-top: 3px;
}
.line-bottom{
margin-top: -.4rem;
}
.active .line-top{
margin-top: 0;
transform: rotate(45deg);
transition: transform .3192s .1s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
.active .line-bottom{
    margin-top: 0;
    transform: rotate(-45deg);
    transition: transform .3192s .1s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
header.active{
    height: 100%;
    background-color: #000;
}
.nav-link-apple{
    width: 1.8rem;
    height: 4.8rem;
    position: relative;
    z-index: 1500;
}
.nav-link-bag{
    width: 1.6rem;
    height: 4.8rem;
    transition: opacity 3s;

}
.nav{
    position: relative;

}
.nav-link{
    font-size: 1.7rem;
    padding: 0;
    margin:auto 0;

}
.nav-list-larger{
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    display: block;
    padding: 10.5rem 5rem;
    z-index: 1000;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s;

}
.active .nav-list-larger{
    width: 100%;
    height: 100vh;
    opacity: 1;
    visibility: visible;
}
.active .nav-link-bag{
    opacity: 0;
    transition: opacity .3s;
}
.nav-list-larger .nav-item{
    width: 100%;
justify-content: flex-start;
    border-bottom: 2px solid rgba (255,255,255,1);
}
    .nav-list-larger .nav-item:nth-child(9){
        border-bottom: none
}

    .active .nav-list-larger .nav-item{
        animation: fadeIn 1s ease-in;
    }
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

}

JS:

const selectElement = (element) => document.querySelector(element);

selectElement('.mobile-menu').addEventListener('click', () => {
  selectElement('header').classList.toggle('active');
});

Thank you for your help!