joshuaechevarriadop Posted December 7, 2022 Share Posted December 7, 2022 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> Link to comment
joshuaechevarriadop Posted December 7, 2022 Author Share Posted December 7, 2022 Screen Recording 2022-12-07 at 5.10.44 PM.mov Link to comment
creedon Posted December 7, 2022 Share Posted December 7, 2022 Quote Ill test out a code in w3 or codepen and then bring it into squarespace and it doesnt work. codepen and the like are not code repositories specifically for SS code, unless the pen itself indicates that it is specifically SS compatible. Sometimes it can take substantial work to get code that wasn't designed from the ground up to work with SS, to work, if at all. It would help to be able to see the original pen to see how the effect is supposed to work. 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
joshuaechevarriadop Posted December 7, 2022 Author Share Posted December 7, 2022 1 hour ago, creedon said: codepen and the like are not code repositories specifically for SS code, unless the pen itself indicates that it is specifically SS compatible. Sometimes it can take substantial work to get code that wasn't designed from the ground up to work with SS, to work, if at all. It would help to be able to see the original pen to see how the effect is supposed to work. https://new-website-code.w3spaces.com/saved-from-Tryit-2022-12-07.html Link to comment
tuanphan Posted December 10, 2022 Share Posted December 10, 2022 On 12/8/2022 at 6:33 AM, joshuaechevarriadop said: https://new-website-code.w3spaces.com/saved-from-Tryit-2022-12-07.html What is your Squarespace site url? We can check easier 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