pflombard

Site URL: http://s15.squarespace.com/guitar-kids-a-lesson1 My embedded iframe YouTube videos (with 'start' and 'end' parameters) DO NOT play on MOBILE. // MY FIRST ATTEMPT - Youtube iFrame I used the following YouTube iframe in a code block. <div style="position:relative;padding-top:56.25%; margin-top:0px;"> <iframe width="100%" height="100%" src="https://www.youtube.com/embed/x7qfdYyHJ_c?start=285&end=340" frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:100%;" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> </div> This code works great on Desktop! But NOT ON MOBILE (it just bombs out.) From what I can gather, this is a limitation of the YouTube iframe embed functionality, which only works on Desktop when you call start/end parameters. // POSSIBLE SOLUTION - Javascript with Youtube api Step 1: Use javascript/jquery with the YouTube api instead of an iframe, to call the video with the parameters. Step 2: Ensure that when the visitor plays the video a second time (or more), that the video again plays from the intended 'start' position, and not jump to the beginning. // STEP 1 I found this (related) tutorial on Stack Overflow. ...but I don't know how to incorporate this into SquareSpace. What goes in the header, and in the body? How to set the start and end variables? -- // STEP 2 Once Step 1 works for mobile, then my next step would be to ensure when the user watches the segment for a second or third time, that each time the video should again start at the intended 'start' position, and not to jump to the beginning of the video. I found this related tutorial... ...but again, I don't know how to incorporate it into SquareSpace. -- Your help will be greatly appreciated. Kind regards Pierre PW: swallow15_pw

Thanks so much for getting back to me, @rwp. I tried this, but it doesn't seem to have any effect to help keep the nav bar height constant while I change the browser window size. But @tuanphan recommended that I add padding at the top and bottom and this appears to have done the trick!: Now the height remains constant when I drag the browser window left or right. .header-announcement-bar-wrapper { padding-top: 10px !important; padding-bottom: 10px !important; height: 100% !important; }

Site URL: http://s15.squarespace.com/guitar-kids-a-lesson-1 Hi Community! Can you help? I'd like to control the height of my nav bar (header) more precisely between Desktop, Tablets and Mobile. If I look at www.apple.com and youtube.com, then I notice that the height of their nav bar remains constant when I drag the browser window from desktop size to mobile size. But with my SquareSpace 7.1 site, the nav bar height does not remain constant while I drag the browser window smaller or larger. How would one achieve a consistent height for the nav bar, as with Youtube and Apple, across devices / window sizes ? My own attempt at CSS (see below) works to some degree, but only at specific, static window sizes, but not when I manually drag the browser window left and right. The height of the nav bar keeps shifting as the window size increases or decreases. The same applies to the logo, text and burger bar inside the nav bar, which also shifts when the window size shifts (see screenshots). Any advice would be greatly appreciated! Thank you kindly. /* ----------MY ATTEMPT AT CSS TO KEEP THE NAV BAR HEIGHT CONSISTENT ACROSS ALL WINDOW SIZES AND DEVICES------------------- */ // CSS FOR TABLET AND MOBILE // @desktop: ~"only screen and (min-width: 1025px)"; @mobile: ~"only screen and (max-width: 767px)"; @tablet: ~"only screen and (min-width: 768px) and (max-width: 1024px)"; /* ----------------------------- */ // HEADER HEIGHT - LESSON 1 - DESKTOP // @media @desktop { #collection-5ece5287d9f131439a163282 { #header .header-inner { padding-top: 0px; padding-bottom: 15px; } .header-announcement-bar-wrapper { margin-top: -15px; height: 90px !important; } } } // HEADER HEIGHT - LESSON 1 - MOBILE // @media @mobile { #collection-5ece5287d9f131439a163282 { #header .header-inner { margin-top: -15px; } .header-announcement-bar-wrapper { margin-top: -9px; height:80px !important; } } } // HEADER HEIGHT - LESSON 1 - TABLET // @media @tablet { #collection-5ece5287d9f131439a163282 { #header .header-inner { margin-top: -5px !important; } .header-announcement-bar-wrapper { margin-top: 0px; height:80px !important; } } }

Thanks so much rwp! This put me on the right path. I found the collection-id for that specific page. This is the end result that worked just great. #collection-5ef47e01a0680c5b1a28ecac #header { position: fixed !important; z-index: 1000; //in case it scrolls behind certain elements further down. background: #df4430; //because header was transparent. }

Hey everyone! In 7.1, how would you set the header to a "Fixed position", on only one specific page? I.e., on all other pages it should disappear when you start to scroll. I've searched high and low and it appears that no one has addressed this issue yet. Any help would be greatly appreciated! Pierre

Hi Tuanphan. Thanks for responding. It's "swallow15_pw". Yes, I am using 7.1, but can't figure out how to have two text navigation links next to the logo, which are not effected by navigation style tweaks for those links on the right. E.g. I would still want to the burger bar to appear to the right for the rest of the links. And, eventually there will also be a "log in" link to the right, like that of Dropbox.com. I hope that all makes sense!

Site URL: http://s15.squarespace.com Hey everyone! Can you help? I'd like to add two extra links to my header bar, next to my site logo. (NB: While my main navigation hamburger bar remains put on the right.) Just like www.dropbox.com (see attached screenshot showing the two links "For Teams" and "For Individuals" next to the logo.) I attach my current layout, as well as a "Design Mockup" showing the two links I'd like to add ("For Kids" and "For Adults"), with the one link faded to show that it's the active page. Thank you so much!

I would also be grateful if someone knows how to achieve this on Squarespace in a clean and simple way. Here's another great example of columns that scroll separately and automatically adjust to different screen sizes... https://www.surfacemag.com