Jump to content

LeauxFi

Member
  • Posts

    35
  • Joined

  • Last visited

Everything posted by LeauxFi

  1. i fiddled with that code a bit when I realized the social icons had also gone white. messy to double up the coding but it worked. I added this onto the bottom of yours to also make my social icons black. thanks tuan! body.header--menu-open header#header.shrink use { fill: black !important; stroke: black !important;} as for the issue in number 1, sure. its super weird. but easily repeatable on any phone. step 1: go to any page and open the menu step 2: open the team link/nav folder (everything still looks fine) step 3: tap on the menu to close it out INSTEAD of hitting back to close out the nav folder. my theory is when it slides over the menu to cover the screen, then you go 1 level deeper by going into the nav folder.... it slides back only one level when you choose to close it that way. theory might make no sense but its what i imagine lol
  2. i have this EXACT problem and haven't been able to code my way out yet so I'll watch this thread. However, Paramount studios? I love that studio even though I've only been there once. I'll send you a message
  3. this worked out perfectly, and i think i understand the code written here now which is awesome. But I've now discovered two issues because of it (my fault for sure) 1- Once you expand the folder in the menu to show the team members, and then close the menu compeltely, the text stays in place O_o and its just floating there like it didn't realize it should go away. And. 2- I have a color changing menu bar active. Its works as intended everywhere else EXCEPT in one case: When you scroll down on any page, the menu color inverts from white to black, and the font color & logo invert from black to white so they're still visible. The problem is, on mobile when you scroll down and hit menu, the word menu actually blends in now. Because the text has inverted to white, and is now on a white background. Is there a way to stop the inversion from happening ONLY when the menu opens on mobile? this is kinda confusing so I'll attach photos Top of the page view: Correct Scrolled down until the bar color changed and text inverted: correct Opened the menu after scrolling down: Wrong 😞
  4. IDEALLY a "+" by the team dropdown, and a "<" by the Back button. Is that possible?
  5. I mean when you scroll, the size of the menu changes slightly. On my website, I made it so it shrinks a bit and completely inverts from white background & black text, to black background & white text when you scroll. And targeting the header only on one specific page? That goes beyond my knowledge sorry. Maybe @tuanphan the genius knows?
  6. I think it looks very good, only critique I have is the font choice for the large sized font. It just looks plain and lacks personality imo. And since the font is so large, it really pulls attention. Mainly "Crafting Compelling Customer Journeys" and "We Bridge Creativity And Performance To Captivate Audiences And Boost Your Business's Bottom Line." fonts. I think a different font choice will elevate the page that much more
  7. First, your job is SO cool. Awesome site. Looks like your menu shrinks on every page on scroll. And the home page is the only page effected with color change on shrink. Did you use CSS to get that header/menu shrink? I did on my site, but the color change is intentional for me. I'm no expert at all, but it seems to me a custom code is the issue. And are you actively working on it now? As I was typing this, it went from changing to black, to changing to this slate gray color instead
  8. indeed. but MORE like the example here: 1 - https://jakemitchellmiller.com/ -this is a perfect execution of what I wanted to achieve. Full screen splash that behaves like a normal parallax somehow. I believe this site was also created here on squarespace and was linked from another thread link from months past
  9. believe it or not, i figured out a combination of code (thru terrible trial and error) to just hide the "<" and ">" completely on the mobile menu. although I would prefer to have a "+" sign instead for my dropdown. its www.thetenmg.com
  10. I've put the codes you placed here into my mobile site and they work, but I find the arrows "<Back" and the dropdown menu i have ">" look super crazy. Are you still working on this one @tuanphan just wondering. I know you help everyone on here
  11. it looks completely fixed now. how did you do it? it even works on mobile it seems
  12. agreed. doesn't seem like this was ever fixed. The carousel is unusable for me, and though the grid looks better... it doesn't have any controls. I just want to make a carousel that is cleanly spaced like the grid. seems impossible
  13. How do I get the main splash video to use parallax? In another thread @tuanphan gave this solution which worked for a section further down the page: But when I try to target my splash landing which is a video... it doesn't work at all. I know this is because apparently squarespace doesn't give a public facing url for the videos you upload. So I cant use the video url to replace the one in the code provided. I saw a suggestion saying to upload directly to the custom files area under CSS, but it can only take files under 20mb. The video exceeds that. Can anyone tell me how I would achieve parallax on the splash video? Do I need to finesse an unlisted youtube video and have it point there or something? site: www.thetenmg.com
  14. Did anybody find an answer to this?
  15. hmmmm. i found that you're absolutely right, i was missing a "}" on line 53. So it was pulling it from another place which I guess meant everything in between was wrapped in the mobile-only ruleset. I fixed it.... but it changed nothing 😢 so i ask this... do any errors occuring BELOW the code we've been talking about (lines 76-84) effect it? As in, could a broken media/mobile code below here be the culprit? EDIT: Found the culprit. The animation/javascript for that page was causing all the issues. It broke everything. I deleted it in its entirety and everything went back to working. I'm thinking the missing "}" was getting pulled from the broken animation script putting everything in between into mobile-only mode. once i fixed that...i can see a lot more things are broken but they're obvious. it'll be tedious, but its a RELIEF. I now know at least all the code didn't suddenly break, but instead the animation which I imported from outside broke. Go figure. This was the code responsible /*Loading Animation from Will-Myers.com*/ #wm-loading-animation{ position:fixed; z-index:9999; height:100vh; width:100vw; background:#ff0000; display:flex; justify-content:center; align-items:center; } .loading-graphic{ animation: pulse 0.6s ease-in-out 0.3s; } #wm-loading-animation.hide-animation{ visibility: hidden; opacity: 0; transition: visibility 0s 1s, opacity .5s linear; /*Hide this element after load*/ } @keyframes pulse { 0% {transform: scale(1);} 50% {transform: scale(1.3);} 100% {transform: scale(1);} } /*End Loading Animation from Will-Myers.com*/ //FIX ME @media screen and (max-width:767px) { #REMOVEMEwm-loading-animation{ position:fixed; z-index:9999; height:100vh; width:100vw; background:#ff0000; display:flex; justify-content:center; align-items:center; } .loading-graphic{ animation: pulse 0.5s ease-in-out .2s; } #wm-loading-animation.hide-animation{ visibility: hidden; opacity: 0; transition: visibility 0s 1s, opacity 1s linear; /*Hide this element after load*/ } @keyframes pulse { 0% {transform: scale(1);} 50% {transform: scale(1.3);} 100% {transform: scale(1);} } /*End Loading Animation from Will-Myers.com*/
  16. Thank you. I ran my code through a few checkers and it came back with no errors. And I discovered something today.... it seems that all of the codes work... for mobile. O_o So when I'm editing my site, and I switch to the mobile view? All of the codes are working as they used to. It's only on desktop application where suddenly they stopped working. I've been changing them around a little in mobile view and they're still responsive as well. So, is it possible a code is wrong if it still works as expected on mobile but not desktop? And I'm not talking about the codes where we specify mobile only with the max-width tag. I'll post an example. On this code, I simply wanted any text in a specific section that was underlined... to be turned red, alter the font size, and remove the underline. I used this code: //WORKS ON MOBILE? change underline color section[data-section-id="637c4a75c10b4a517ecbd275"] span[style*='underline'] { color: red; text-decoration: none !important; font-size: 23px; } span[style*='underline'] { color: red; text-decoration: none !important; } On mobile it works fine and you get: But on desktop view you get: I'm growing more and more confused by the minute lol. Hope you all are having a great holiday season. I'm going to go through and check line by line for any missing ; as it was suggested earlier. I don't have any error notifications from squarespace nor the other checkers though. I appreciate any help!
  17. There WAS an error a few days ago, it said i was missing an opening { somewhere. I found it and fixed it so now theres no errors its just... nothing that used to work, still works. I just don't understand how everything could just break like that. I should start giving examples... on our gallery, it used to change to gray on mouseover using this code: //color to gray on mouseover, grid,masonry,reel, or strips .gallery-masonry-item img { filter: grayscale(0); -webkit-filter: grayscale(0); } .gallery-masonry-item:hover img { filter: grayscale(1); -webkit-filter: grayscale(1); } What changed on squarespace's side... that invalidated this? If i could understand that, I could probably fix the rest of the code too. And thank you for your help thus far. I'm pulling my hair out trying to understand this
  18. update.... i just deleted ALL of my CSS and it made absolutely no difference to the site. O_o maybe its not that the codes are broken, but somehow the CSS isn't functioning AT ALL for my site? I even added a basic align code from a recent thread to test it, and nothing happened. /* Keep the menu items at the same height as the site title */ .header-menu-nav-wrapper { position: fixed; top: 41%; /* Adjust this value to center the menu vertically */ transform: translateY(-50%); } update #2 : got something to work. Tried a piece of a code i found recently in another thread meant for changing the font in the menu/header. Altered it to manually change the height of my menu to try and balance it out...and it worked? how did something THIS simple do the job? it doesn't even seem finished. is it really just the naming conventions that broke everything? .header * { margin-top: -2px !important }
  19. Hey thanks for the suggestions. I've been looking through the selectors and I just don't get what I did wrong. I singled out one of the things that broke. At the top right and bottom left of my website are some social links. The last one is a tiktok link where I used CSS to change the icon to the standard tiktok icon. Whatever changed on squarespace's background broke that. All it's supposed to do is show the picture like it used to. Here's the code I have to do so BOTTOM TIKTOK ICON: //tiktok footer icon sqs-svg-icon--wrapper.url div { visibility: hidden; } .sqs-svg-icon--wrapper.url { background-image: url(https://static1.squarespace.com/static/61bd15d7e1c71204485ecbe0/t/62131fb6b7c2f243d399385c/1645420470663/tiktokroundblack.png); background-size: cover; background-repeat: no-repeat; transform:scale(1.6); position: relative; bottom: 0.5px; } TOP TIKTOK ICON: //social links in header .icon[aria-label="URL"] svg { visibility:hidden; } .icon[aria-label="URL"] { background-image: url(https://static1.squarespace.com/static/61bd15d7e1c71204485ecbe0/t/621da8ab0b9b365aea19f2f4/1646110891131/tiktoklogo2.png); background-size: 16px; background-repeat: no-repeat; transform:scale(1.04); position: relative; top: 0px; }
  20. squarespace was my first foray into css and writing scripts outside of html way back in the myspace days lol. Ive fixed the text changing to white issue through editing styles. No idea how that changed or why. But i think you're right that IS the culprit. Something has happened on Squarespace's side that broke all my custom css. Hopefully its as simple as renaming everything but, did they list out somewhere what names things would have to change to? Example: What do i need to change here to make this work? //leauxfi banner section[data-section-id="61fdb3fc29a34e3eea8fb405"] .row { display: flex; align-items: center; justify-content: center; } section[data-section-id="61fdb3fc29a34e3eea8fb405"] .row .col .sqs-block { padding: 10px !important; } #block-daf99410cfc6092cafe3 { margin-top: -2px; } Or my now broken anchor/jump to links //event anchor links stuff html { scroll-behavior: smooth; scroll-margin: 300px; } .anchor { display: block; position: relative; top: -150px; visibility: hidden; } @media screen and (max-width: 768px) { #block-yui_3_17_2_1_1669057617341_1590729 { display: none !important; visibility: hidden; } #block-yui_3_17_2_1_1669057617341_1590729 { visibility: hidden; display: none !impmortant; } } #block-yui_3_17_2_1_1646149692611_6756 { padding-top: 7px; } @media screen and (max-width: 768px) { #block-yui_3_17_2_1_1669226799897_33295 { display: none !important; visibility: hidden; } } Something just needs to be renamed?
  21. What happened? I haven't checked my site in months because everything was the way I wanted... I went back today for a basic update and noticed my menus were no longer vertically centered anywhere on my site. Then I noticed all the fonts that we're previously black on my bio pages for me and my team, are white. I had an animation queued up for a hidden page on the site, and the animation was completely broken as well. I had custom indexing code (thanks tuan!) on that hidden page where you click a title and it would scroll down to that part. It took a lot of experimenting to figure out how to get it to scroll down to the exact spot I wanted. But now... its back to scrolling too low on every title. Did something change in the coding in the last few months? Why are my codes suddenly not working and/or wrong without any changes? website : www.thetenmg.com
  22. Thanks to some of the other threads on anchor links, I got mine up and running for the most part. The problem is, they're overshooting their target by a good margin on every one. Can someone tell me what I'm missing? This is the code block I have on the page Heres the page : www.thetenmg.com/event Also, how do i make it so the menu can be collapsed to the side if they dont want to use it? This is the code block on the page to get the links visible on the right <ul class="tp-float-buttons"> <li><a href="#WHAT">WHAT</a></li> <li><a href="#WHO">WHO</a></li> <li><a href="#WHEN">WHEN</a></li> <li><a href="#WHERE">WHERE</a></li> <li><a href="#SPONSOR">SPONSOR</a></li> <li><a href="#GUEST">GUEST LIST</a></li> </ul> <style> ul.tp-float-buttons { position: fixed; top: 15%; right: 3px; z-index: 999; list-style: none; padding-left: 0; margin: 0; } ul.tp-float-buttons a { color: white; background-color: black; padding: 3px; margin-bottom: 2px !important; display: inline-block; min-width: 125px; text-align: center; font-size: smaller; top: 125px; position: relative; } </style> And this is the CSS code i had pertaining to it: html { scroll-behavior: smooth; scroll-margin: 300px; } .anchor { display: block; position: relative; top: -150px; visibility: hidden; #WHAT {top: -250px;} } and finally this is the code block i put in the very top of each section for the anchor links to refer to: <div ID="GUEST"></div> and <div ID="WHEN"></div> and <div ID="WHO"></div> etc etc
  23. i dont think so, its worked out fine for me. I had to go back and adjust some of the other css i had but it all worked out in the end.
  24. this worked perfectly. thank you! but arghhhh i thought i could figure this out with my novice skills. then you drop code i don't even understand how to read. "a".header? skip-link? what is this code instructing the site to do? is the cause of the problem some invisible button element that threw the alignment out of wack all the sudden? i just want to understand what happened IF possible edit: and now that ive gone back, i see it threw the banners i had on my website off alignment. however, i can tell it UNDID the need for me to have custom css to center them correctly. so your code seems to have fixed my banner alignment issues totally. what happened here?
×
×
  • 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.