atanasmalamov

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!

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.

Site URL: https://atanasmalamov.com Hi guys, I was wondering if there is a way to make the Carousel block display the blog collection ,for example, swipeable. I have heard and seen the application of Flickity to create a testimonial slider with the same effect. But how can this be done for the carousel? Thank you very much!

Thank you! That worked. Do you think there is anyway to keep the navigation in one line with the logo and cart?

Hi guys! I am experiencing the same problem. (https://atanasmalamov.com) i tried the solutions above but did not work for me, any other workaround? Thank you

Wondering if someone has a solution for this? Thank you

Looking at this website on a mobile device- https://www.minimist.ca/. When you click on the menu icon, it rotates and after that the menu items "work", "services" "code shop" come animated from left to right, one by one. How can I achieve this animation? Thanks

Site URL: https://atanasmalamov.com Hi guys, I am looking at the mobile navigation of this website https://www.minimist.ca/. The navigation comes animated button by button. It looks really nice to me, do you know how can I achieve this effect? It seems like it uses the same theme ( Brine) I didn't see another topic like this, if there is I'm sorry in advance.

That worked! Thank you so much Tuan Phan!

Site URL: https://www.atanasmalamov.com/the-perfect-ballroom-dance-frame Hi guys, I have used this code before: <style> #header {display: none !important;</style> to remove header form a page. But since switching to Brine, it is not working anymore. My goal is hide the navigation on this particular page to serve as a landing page. Thank you very much and Im sorry if a solution exists on the forum.

Thank you! Tried that. the weird thing is it doesnt work consistently.... every other time or so.

Same.. It just works once.

Tried. it stopped working at all. I cant believe, there is no simple solution for something seemingly so simple

I tried. It is really strange. It works but only the 1st time you load a page and click on it, it opens the new page. but if you click 2nd time on the folder it opens the other page.