zzlogan Posted July 14, 2021 Share Posted July 14, 2021 (edited) Site URL: https://pelican-snail-erg5.squarespace.com/ I'm trying to make a similar side navigation/ status bar shown in the video. Would there be a way to do this in Javascript or CSS, or is there a plugin for it? Thanks, Zack side statusbar.mp4 Edited August 18, 2021 by zzlogan Link to comment
Beyondspace Posted July 14, 2021 Share Posted July 14, 2021 51 minutes ago, zzlogan said: Site URL: https://pelican-snail-erg5.squarespace.com/ Hi, Would anyone know what the proper term for the side status bar is shown in the video? And is there anyway to replicate that via CSS or existing squarespace plugins? Thanks, Zack side statusbar.mp4 Í í 1 hour ago, zzlogan said: Site URL: https://pelican-snail-erg5.squarespace.com/ Hi, Would anyone know what the proper term for the side status bar is shown in the video? And is there anyway to replicate that via CSS or existing squarespace plugins? Thanks, Zack side statusbar.mp4 It called same-page navigation, you can find more info about it here Creating same-page links in Squarespace ▪️ Launch the Damn Thing! zzlogan 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted July 16, 2021 Share Posted July 16, 2021 On 7/15/2021 at 10:07 AM, zzlogan said: @bangank36 would you have any idea of how to do what was done in the video above? I was looking through the link you sent over and it showing how to click a link on a page and it dropping you down lower in the page. I need to do that but have a side navigation bar... not sure if that possible to add via css?.. You mean this kind of navigation right? on 7.0 I noticed mentor template has this feature built-in BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
zzlogan Posted July 18, 2021 Author Share Posted July 18, 2021 @bangank36, yes, that is correct, as seen here: https://michelegee.com/ I'm currently using a 7.1 site, anyway to accomplish that for this? And I think they are using a Squarespace site to do this sidebar same-page navigation. Link to comment
Beyondspace Posted July 19, 2021 Share Posted July 19, 2021 4 hours ago, zzlogan said: @bangank36, yes, that is correct, as seen here: https://michelegee.com/ I'm currently using a 7.1 site, anyway to accomplish that for this? And I think they are using a Squarespace site to do this sidebar same-page navigation. There is tuts in the launch the damn thing url I sent BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
zzlogan Posted August 18, 2021 Author Share Posted August 18, 2021 @creedon, would you have any ideas on how this could possibly be done? Link to comment
creedon Posted August 18, 2021 Share Posted August 18, 2021 I've not done this myself. Did you try the tutorial link @bangank36 provided? It appears to have instructions for a v7.1 site. 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. Link to comment
zzlogan Posted September 3, 2021 Author Share Posted September 3, 2021 @creedon, thanks for looking into it. I have looked at the video, it is great for the anchor links but, I need more of the functionality of the little bars popping out on a hover that you can then click and it drops you down to the bottom of the page, as seen here: https://michelegee.com/. @rwp, I noticed you had an answer on something similar for this post. Would you have any recommendations on things to try? Link to comment
zzlogan Posted October 5, 2021 Author Share Posted October 5, 2021 I tried this, and it is working /* Style the links inside the sidenav */ #mySidenav a { position: absolute; /* Position them relative to the browser window */ right: 0em; /* Position them outside of the screen */ //transition: .1s; /* Add transition on hover */ padding: 10px; /* 15px padding */ position: fixed; width: 100px; /* Set a specific width */ text-decoration: none; /* Remove underline */ font-size: 15px; color: #ebb646; //#ffad77 //border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */ z-index: 7990; } #mySidenav a:hover { right: .444em; /* On mouse-over, make the elements appear as they should */ } /* The about link: 20px from the top with a green background */ #supload { top: 370px; //background-color: #04AA6D; } #sos { top: 400px; //background-color: #2196F3; /* Blue */ } #govote { top: 430px; //background-color: #2196F3; /* Blue */ } #solarstates { top: 460px; //background-color: #f44336; /* Red */ } #neuronnectar { top: 490px; //background-color: #555 /* Light Black */ } #rdoor { top: 520px; //background-color: #555 /* Light Black */ } #aboutme { top: 550px; //background-color: #555 /* Light Black */ } @media screen and (max-width:740px){ #block-yui_3_17_2_1_1632919836480_17663{ display:none; }} html { --scroll-behavior: smooth; scroll-behavior: smooth; } with these code injections Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('.header-menu-nav-item a').click(function(){ $('body').removeClass('header--menu-open'); $('button.header-burger-btn.burger').click(); }); }) </script> Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ // Add smooth scrolling to all links $("a").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 100, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); }); </script> This is working well, only thing is finding a way to change the font color when the text glides over a new background color. I have tried invert, but it only works with static text, not when I scroll down the page the text just stays the same color. Would anyone know how to change the text color when scroll into a new section? @tuanphan @bangank36 @creedon JanetTTT 1 Link to comment
creedon Posted October 5, 2021 Share Posted October 5, 2021 @zzlogan There are two ways I can think of too solve this issue. I don't have any specific code for either scenario. First you could put a background color behind the sidebar itself. That way you wouldn't have to do anything fancy. Just some, hopefully, simple CSS. The other method that comes to mind would be somewhat tricky and would require Javascript. It might be possible to track the sidebar and detect what background color is behind it and then alter the color of the links. 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. Link to comment
zzlogan Posted October 7, 2021 Author Share Posted October 7, 2021 thank you! creedon 1 Link to comment
JanetTTT Posted August 26, 2022 Share Posted August 26, 2022 On 10/5/2021 at 5:21 AM, zzlogan said: I tried this, and it is working /* Style the links inside the sidenav */ #mySidenav a { position: absolute; /* Position them relative to the browser window */ right: 0em; /* Position them outside of the screen */ //transition: .1s; /* Add transition on hover */ padding: 10px; /* 15px padding */ position: fixed; width: 100px; /* Set a specific width */ text-decoration: none; /* Remove underline */ font-size: 15px; color: #ebb646; //#ffad77 //border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */ z-index: 7990; } #mySidenav a:hover { right: .444em; /* On mouse-over, make the elements appear as they should */ } /* The about link: 20px from the top with a green background */ #supload { top: 370px; //background-color: #04AA6D; } #sos { top: 400px; //background-color: #2196F3; /* Blue */ } #govote { top: 430px; //background-color: #2196F3; /* Blue */ } #solarstates { top: 460px; //background-color: #f44336; /* Red */ } #neuronnectar { top: 490px; //background-color: #555 /* Light Black */ } #rdoor { top: 520px; //background-color: #555 /* Light Black */ } #aboutme { top: 550px; //background-color: #555 /* Light Black */ } @media screen and (max-width:740px){ #block-yui_3_17_2_1_1632919836480_17663{ display:none; }} html { --scroll-behavior: smooth; scroll-behavior: smooth; } with these code injections Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('.header-menu-nav-item a').click(function(){ $('body').removeClass('header--menu-open'); $('button.header-burger-btn.burger').click(); }); }) </script> Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ // Add smooth scrolling to all links $("a").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 100, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); }); </script> This is working well, only thing is finding a way to change the font color when the text glides over a new background color. I have tried invert, but it only works with static text, not when I scroll down the page the text just stays the same color. Would anyone know how to change the text color when scroll into a new section? @tuanphan @bangank36 @creedon @zzloganHey, Zac! Thanks for your code! I am totally new in square space. I have three questions. 1. Should I create anchor link first? then I put code in it? 2.for first code, should I drop it into custom CSS? 3.I checked your website. You have a pop up effect. It looks awesome! How do you make it? Thank you so much! Link to comment
tuanphan Posted August 28, 2022 Share Posted August 28, 2022 On 8/26/2022 at 12:25 PM, JanetTTT said: @zzloganHey, Zac! Thanks for your code! I am totally new in square space. I have three questions. 1. Should I create anchor link first? then I put code in it? 2.for first code, should I drop it into custom CSS? 3.I checked your website. You have a pop up effect. It looks awesome! How do you make it? Thank you so much! #1. yes #2. Yes. It is CSS code, you need to add it to CSS box #3. Which popup are you referring to? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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