Jump to content

zzlogan

Circle Member
  • Posts

    60
  • Joined

  • Last visited

Everything posted by zzlogan

  1. 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
  2. @tuanphan, I solved the problem. I had to embed my Google Slides, I hadn't done that and it worked. I search under the Help tab in Google Slides, "Publish to web", and then grabbed this embed code: <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vTZkDz6OqoLl05-SNkQme4nJclDV_5cCenM1bs6IGoqj_VmxQ453tkDoVBgcL4lZcbb9nzPcDBA0Q35/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe> <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vTZkDz6OqoLl05-SNkQme4nJclDV_5cCenM1bs6IGoqj_VmxQ453tkDoVBgcL4lZcbb9nzPcDBA0Q35/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
  3. @tuanphan, I removed the code block and it is still loading the page right above the Google Slides, towards the middle of the website page.. It is strange because I have these code blocks enabled on other pages and this is the only page where this is happening. Should I try to adjust another code block?
  4. Site URL: https://www.wyzedge.com/solar-states Hi, I'm having issues with the my website is loading one of my pages towards the middle/bottom, like if some had automatically clicked an anchor link. As seen here: https://www.wyzedge.com/solar-states I do have code injections to show the Google Slides, I'm not sure what is causing this. Would anyone have any ideas on how have it not shoot down towards the bottom? @tuanphan
  5. thanks to @tuanphan, here is what we put together. @media screen and (min-width:768px) { //Desktop view iframe[src="YOUR AbobeXD PROTOTYPE LINK"] { width: 60%!important; //this depends on any spacers you have next to your abobexd code injection } div#YOURBLOCKID { width: 60%!important; //this depends on any spacers you have next to your abobexd code injection } } @media screen and (max-width:767px) { //Mobile view iframe[src="YOUR AbobeXD PROTOTYPE LINK"] { width: 90%!important; } div#YOURBLOCKID { width: 90%!important; } }
  6. @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?
  7. @tuanphan, hey this is working with the padding .header-display-desktop { flex-direction: column-reverse; justify-content: space-between !important; align-items: flex-end; } .header-title-nav-wrapper { flex: 1 0 100% !important; width: 100%; padding: 13px; } div.header-actions { justify-content: flex-end !important; } .header-display-desktop { flex-direction: row-reverse !important; } .header-actions.header-actions--left { position: relative; top: -23px; }
  8. @tuanphan, I actually was looking to get space between the list of Nav items and the start of the page. Right now the Header Nav feels to smooshed with the start of the actual Page, and I was hoping to create a distance between the two. Would that be possible to do? with padding maybe?
  9. @tuanphan, the right side is where I'm trying to have the Shopify shopping cart located. Right before and next to the Instagram logo in the Header Navigation. Right now, we can only use Shopify checkout page and not the Squarespace checkout, because currently we only manage our inventory and orders via Shopify. Does this answer your question? And do you need anything else from me?
  10. @tuanphan, this code is working well! thank you. One question on this.. .header-display-desktop { flex-direction: column-reverse; justify-content: space-between !important; align-items: flex-end; } .header-title-nav-wrapper { flex: 1 0 100% !important; width: 100%; } div.header-actions { justify-content: flex-end !important; } .header-display-desktop { flex-direction: row-reverse !important; } .header-actions.header-actions--left { position: relative; top: -10px; } Would there be a way to control the buffer space from the Header Navigation and page?
  11. @creedon, this works great! thank you for this! it works great and am now just copying that for the different pages that have the same thing and replacing "magazine" with "blog", and it just works. Thank you for sharing this approach.
  12. @tuanphan, would you have any ideas on how to solve this question? https://community.adobe.com/t5/adobe-xd/adobexd-sharing-prototype-link-on-squarespace-website/m-p/12321993/thread-id/54287 my website: https://pelican-snail-erg5.squarespace.com/ -- Hi, I'm having an issue with resizing the prototype link on my Squarespace website. Currently, it is too large for anyone to effectively click-through, you have to scroll up and down to view the whole prototype. I tried using this custom CSS, div#block-yui_3_17_2_1_1628389713241_45661 iframe { overflow:hidden; height:75%; width:75%; } But this makes the prototype mini. I also tried, div#block-yui_3_17_2_1_1628389713241_45661 { width: 50%; margin: 0 auto; } And this doesn't have any effect on it.
  13. Site URL: https://pomegranate-badger-p3wd.squarespace.com/ Hi, I'm using 7.1. I have five Main Navigation pages that are associated to pages that are in the Not Linked section of Squarespace. I'm trying to make it so when someone is viewing a Not Linked Page, the Main Navigation associated to that page remains underlined. For example: so when someone is on Issue #1: Disrupt (Not Linked Page), Magazine (Main Navigation) is still underlined How can you do this without using Folders? @tuanphan, @bangank36, @creedon
  14. Site URL: https://pomegranate-badger-p3wd.squarespace.com/ Hi, I'm trying to add a Shopify link / cart icon to my site header. So that when someone clicks on the logo, it will open up the checkout page on the side. Please see attached. Any ideas on this?
  15. @tuanphan, I having a similar issue, where the social media icon isn't lining up with the Main Navigation links, as seen below. Would there be a way to push the Instagram logo up to be in the same line as the Home/Blog buttons? website: https://pomegranate-badger-p3wd.squarespace.com/ thanks!
  16. @iamdavehart thank you for this input and feedback!
  17. Site URL: https://pomegranate-badger-p3wd.squarespace.com/ Hi, I'm trying to customize the newsletter form button on hover, and unable to figure it out. Here is the code I have so far (edits the padding, font type, color, border) button.newsletter-form-button.sqs-system-button { color: black !important; border: 2.22px dashed #000000 !important; padding: 10px 44px !important; font-family: 'ApercuR'!important; } button.newsletter-form-button.sqs-system-button:hover { background-color: #ffe3a7 !important; opacity: 1 !important; } But every time, I hover over the "submit" button it fully goes black. Here is the code that works for my Contact Us form, that is working perfectly that I'm trying to replicate for my newsletter. .sqs-block-form .sqs-editable-button { color: black !important; border: 2.22px dashed #000000 !important; padding: 10px 44px !important; //height and width font-family: 'ApercuR'!important; } .sqs-block-form .sqs-editable-button:hover { background-color: #ffe3a7 !important; opacity: 1 !important; } Would anyone be able to weigh in on this?
  18. I had to use this code to change the text of the placeholder .sqs-block-form .field-element::placeholder { font-family: 'YOUR FONT' !important; }
  19. Site URL: https://pomegranate-badger-p3wd.squarespace.com/ I'm trying to add a dashed border around a button via custom CSS. Here is the code I have so far, .button-block .sqs-block-button-element { color: black !important; border: 2.22px dashed #000000 !important; padding: 10px 44px !important; } Currently, there are too many dashes, and I'm trying to "space" them out more. I'm trying to increase the length of each individual dash, please see attached. Would anyone know how to adjust this? changing the border: 2.22px isn't working, just makes the line thicker (and I'm trying to keep the same thinest of each dash).
  20. @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.
  21. 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
  22. You can us Will's Plugin for this, https://www.will-myers.com/products/p/tabbed-sections Then you can add the Buy Button from Shopify for each product, individual sections within Squarespace.
×
×
  • 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.