Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

zzlogan

Member
  • Posts

    60
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

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