joshuaechevarriadop

https://seal-llama-c89p.squarespace.com/ password : website using the code below for this vertical menu but I am trying to slow down the transition on hover for the about, contact and work section. for some reason the effect only works on the links within the folder . Also I want to slow down the transition of the drop down menu. Any ideas? Thanks! /*VERTICAL HEADER */ @media only screen and (min-width: 1023px) { /* Squarespace Editor */ #page .page-section:first-of-type .sqs-section-wrapper { top: 0px !important; } .sqs-empty-section { top: 0px !important; padding-top: 0 !important; } .sections > *:not(.item-pagination) { width: 100%; /*Page Content Width*/ float: right; /*Page Content Placement */ } .item-pagination, .system-page { width: 75%; /* Blog Page Pagination and Cart Page Width*/ float: right; /* Blog Page Pagination and Cart Page placement */ } .page-section:first-of-type, .system-page { padding-top: 0vw !important; } .page-section:first-of-type .section-background { top: 0 !important; } .page-section:first-of-type .content-wrapper, .page-section:first-of-type .sqs-section-editing-ui { padding-top: 0vw !important; } header { background-color: transparent; } .header { position: fixed; width: 20%; bottom:0% !important; /*Header Width */ /*left: 80%; turn on for Right Placement */ } .header * { margin: 0px !important; } .header .header-announcement-bar-wrapper { padding: 0px; height: 100vh; } .header-display-desktop, .header-title-nav-wrapper, .header-nav-list { align-items: flex-start; /*Horizontally Align Site Title, Navigation, and Button */ flex-direction: column; text-align: left; transition-duration: 2s !important; } .header-inner { align-items: stretch; /* Vertically Align Header */ } .header-element a:hover { transition-duration: 2s !important; } .header-nav-item--folder a:hover { transition-duration: 2s !important; } .header-nav { padding: 0 !important; transition-duration: 2s; } .header-title { margin: 1vw !important; width: 60% !important; } .header-nav-list { margin: 2vw !important; } .header-nav-list a { margin-bottom: 1vw !important; transition-duration: 1s !important; /* spacing between navigation links */ } .header-nav-item a:hover { color: red !important; transition-duration: 1s;/* Navigation Links Color on Hover */ } .header-actions--right { flex-direction: column; align-items: flex-start; /* Horizontally Align Cart and Social Icons */ margin: 2vw !important; /* Spacing Above Social Icons */ } .header-actions-action--social { flex-direction: row; } .header-actions-action--social .icon { padding: 4px; /* Spacing Between Social Icons */ } .header-actions-action--social .icon svg:hover { fill: red !important; transition-duration: 2s !important;/* Color of Social Icons on Hover */ } .header-actions-action--cart { padding: 4px; /* Change this to match the spacing between the social icons */ margin: 2vw 0 !important; /* Spacing Above and Below Cart Icon */ } .header-actions-action--cart:hover { .icon--stroke svg, .icon-cart-quantity { stroke: red !important; /* color of cart on hover */ color: red !important; transition: width 1s; /* color of cart quantity on hover */ } } /* Announcement Bar to Go Across the Whole Top */ .header .sqs-announcement-bar-dropzone { width: 100vw; } /* Folders */ .header-nav .header-nav-item--folder:hover .header-nav-folder-content { position: relative !important; text-align: left !important; left: 0 !important; width: 100%; background: transparent !important; transition-duration: 2s !important;/* Background color of folders */ } .header-nav .header-nav-item--folder .header-nav-folder-content { padding: 0em 1em; background: transparent !important; transition-duration: 2s !important; /* Background color of folders */ } } /* Widths for Screens Bigger than 2000px */ @media only screen and (min-width: 2000px) { .sections > *:not(.item-pagination) { width: 90%; } .item-pagination { width: 85%; } .header { width: 10%; } } /* End of Vertical Header */

password is website I used a code to create a vertical menu - customized it to be transparent so it would overlay the images in each section but I can't get the 1st actual section to start at the top of the page. How can i fix this? Thanks! Screen Recording 2023-08-09 at 7.56.23 AM.mov

website is currently live. www.joshuaechevarriadop.com/selected the text on the left is what I wanted to be sticky I am using squarespace 7.1 fluid engine

I wanted to apply a fixed position for it. when I used the above code it said there was a syntax error but I achieved what I needed by using this code below but I would like to figure out how to target multiple data sections at once .page-section:nth-child(1) { position: fixed !important; z-index:9999; }

Hi is it possible to list out multiple data section ids for one set of css This doesn't seem to work so im wondering if there is another method [data-section-id="63a47ed57f4f560e989882c9”], [data-section-id="63a480337f4f560e9898ac76”], [data-section-id="63a4804fd610163651c3c4f5”], [data-section-id="63a480771e0fe210f84f4001”], [data-section-id="63a4809914e37d1742619a31”], [data-section-id="63a480b5ee1b281b1e1ea0e0”] { position: fixed !important; z-index:9999; }

sorry I think I linked the wrong page https://blueberry-carrot-xawg.squarespace.com/selected pw codeblock On this page where it says commercial vertically on the left side

I'm using 7.1 Fluid Engine

https://blueberry-carrot-xawg.squarespace.com/ pw codeblock I am trying to make the word "commercial" sticky but its not working in my css. This is the code I am using [data-section-id="63921eeb4e8af41900174620"] {#block-yui_3_17_2_1_1670522405842_1038417{ position: sticky; top: 500px; } } any thoughts?

https://blueberry-carrot-xawg.squarespace.com/selected PW codeblock

so im using the code below to create a scroll for some text that. it works well for the first text block but I need to use it for two others that start further down the page and thats where I am having a problem. How do you change the starting position? when I change "top" in the if/else functions of the javascript - it doesnt work. I also changed the top position of the CSS. Not sure what to really do . Also is it possible to have this javascript only work within a section of the page by using the section ID? I have the javascript and the css that is making that block vertical. <script> var windw = this; $.fn.followTo = function(pos) { var $this = this, $window = $(windw); $window.scroll(function(e) { if ($window.scrollTop() > pos) { $this.css({ position: 'absolute', top: pos }); } else { $this.css({ position: 'fixed', top: 0 }); } }); }; $('.sidetwo').followTo(400); </script> <style> p.sidetwo{ top: 600px !important; writing-mode: vertical-lr !important; text-orientation: upright !important; letter-spacing:25px; color:white; font-size:35px; font-family:lato; } </style> 1086982907_ScreenRecording2022-12-10at8_59_13AM.mov

not sure what is happening now I added a bunch of blocks that now disappear when I save after editing. When I go back into edit, they are visible. Also I have a bunch of blocks that are overlapping or not with no real rhyme or reason despite of move forward or backward commands on individual blocks or z-index in the custom css. really not sure what to do I actually like what its doing with the word narrative on the side because its going into a new section but now the new word that I want to see keeps hiding behind the images 2011062715_Sequence01.mp4

https://new-website-code.w3spaces.com/saved-from-Tryit-2022-12-07.html

Screen Recording 2022-12-07 at 5.10.44 PM.mov

Im really struggling with some of this code and finding this to be a common issue with squarespace. Ill test out a code in w3 or codepen and then bring it into squarespace and it doesnt work. any changes I make to #menu__toggle:checked ~ .menu__box { doesnt do anything although this is what the menu box should look like when clicked. Any suggestions? This is the code <div class="hamburger-menu"> <input id="menu__toggle" type="checkbox" /> <label class="menu__btn" for="menu__toggle"> <span></span> </label> <ul class="menu__box"> <li><a class="menu__item" href="#">Selected</a></li> <li><a class="menu__item" href="#">Resume</a></li> <li><a class="menu__item" href="#">Contact</a></li> <li><a class="menu__item" href="#">Tools</a></li> </ul> </div> <style> #menu__toggle { opacity: 0; } #menu__toggle:checked + .menu__btn > span { transform: rotate(45deg); } #menu__toggle:checked + .menu__btn > span::before { top: 0; transform: rotate(0deg); } #menu__toggle:checked + .menu__btn > span::after { top: 0; transform: rotate(90deg); } #menu__toggle:checked ~ .menu__box { left: 0 !important; } .menu__btn { position: fixed; top: 40px; width: 26px; height: 26px; cursor: pointer; z-index: 2; } .menu__btn > span, .menu__btn > span::before, .menu__btn > span::after { display: block; position: absolute; width: 100%; height: 4px; background-color: grey; transition-duration: 0.25s; } .menu__btn > span::before { content: ""; top: -8px; } .menu__btn > span::after { content: ""; top: 8px; } .menu__box { display: block; position: fixed; top: 20px; left: 50%; width: 120px; height: 100%; margin: 0; padding: 50px 0; list-style: none; background-color: rgba(0, 0, 0, 0); transition-duration: 0.25s; } .menu__item { display: block; padding: 5px 10px; color: grey; font-family: "lato", sans-serif; font-size: 20px; font-weight: 600; text-decoration: none; transition-duration: 0.25s; } .menu__item:hover { background-color: rgba(0, 0, 0, 0.2); } </style>

I'd love to have it scroll down until a certain point and then stop to introduce a new section that does the same action