atanasmalamov Posted November 21, 2020 Share Posted November 21, 2020 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 comment
creedon Posted November 21, 2020 Share Posted November 21, 2020 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
atanasmalamov Posted November 21, 2020 Author Share Posted November 21, 2020 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment