Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Remove Squarespace Navigation completely and replace it with Custom Code?


atanasmalamov

Question

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.

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0

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 best , and see my profile. Thanks for your support!

Link to post
  • 0
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!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...