Jump to content

Remove Squarespace Navigation completely and replace it with Custom Code?

Recommended Posts

Posted

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.

  • Replies 2
  • Views 998
  • Created
  • Last Reply
Posted

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted
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!

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.