Jump to content

Remove Squarespace Navigation completely and replace it with Custom Code?

Recommended Posts

  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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 comment
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 comment

Create an account or sign in to comment

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

×
×
  • 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.