AThompson_social

@tuanphan -I have a question about how you target the row. So I have a hopscotch situation and am anticipating that I have to target each individual one. How do I find the ID that isn't YUI? or is there a way to flip the order of the text and image on only the odd rows? the use cases section of the homepage https://lettuce-grapefruit-bdsr.squarespace.com/ pswd: socialive

Hi pals, I'm working on styling the blog posts and have run into a snag, the navbar covers up the title and then scrolls behind the blog post itself. Any thoughts? Link to site Pswdd: socialive

@tuanphan Any thoughts?

https://lettuce-grapefruit-bdsr.squarespace.com/ socialive

I have these "hop scotch" sections in my site. On mobile this section looks like garbage because it goes content, image, image, content. Is there anything I can do to make it go image content image content? @lu.diehl @tuanphan https://lettuce-grapefruit-bdsr.squarespace.com/ PSWD socialive

@lu.diehl Thank you so much! this is very helpful. the password is socialive Is there a way to change the color of the nav text instead of just the color of the background? And to trigger the site tile to change to a different version?

Header { position: fixed ; top: 0 ; left: 0 ; right: 0 ; }

this is what I put in and it works for me! /*sticky nav https://forum.squarespace.com/topic/142732-brinekeene-sticky-navigation/#comment-184292*/ Header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; } // fix mobile nav .Mobile-bar--top { position: fixed; top: 0; left: 0; right: 0; background: #173d56; } .Mobile-bar { position: fixed; z-index: 99999; } // move mobile overlay down .Mobile-overlay-menu-main { padding-top: 80px; }

yay! glad I could help! Your site looks beautiful by the way

@ThompsonWebDesign @paul2009 @lu.diehl @colin.irwin @ANI.agency If any of you have any thoughts on this, I would greatly appreciate the help

@tuanphan So I can't get it to trigger a color change. the Page is an index so do I need to put the script in the header of each individual page in the index or just in the header of the index? i've tried both and I can't get it to work. In addition, even when using the script, I can't get the nav to be sticky to the top of the window. I have the nav sticky using the first set of css script in the header <script> // When the user scrolls down 50px from the top of the document, resize the header's font size window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { document.getElementById("header").style.color = "#6ed78f"; } else { document.getElementById("header").style.color = "#173d56"; } } </script> css for making the nav stick to the top of the page /*sticky nav https://forum.squarespace.com/topic/142732-brinekeene-sticky-navigation/#comment-184292*/ Header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; } // fix mobile nav .Mobile-bar--top { position: fixed; top: 0; left: 0; right: 0; background: #173d56; } .Mobile-bar { position: fixed; z-index: 99999; } // move mobile overlay down .Mobile-overlay-menu-main { padding-top: 80px; } css for the transition color change header{ transition: 0.2s; color: #173d56; }

I found this article super helpful, not just for social but icons in general. I was able use just the icon as a link. https://thirtyeightvisuals.com/blog/navigation-links-icons

I've had this problem before, you have to snap them in place. The bar that comes up when you're splitting into more columns, you have to put the one that you one to show up next, so that the snap bar comes up. The full bar will place that image directly after that whole column in the mobile order. The half bar will place that image after the image in mobile order. Hope this helps!

@tuanphan

Hi friends, I am trying to trigger my navigation to change color after scrolling past the hero. Is there a way I can trigger the change by div or pixel? I currently have my nav as a sticky nav and want to keep that. this is what I'm working with. /*sticky nav https://forum.squarespace.com/topic/142732-brinekeene-sticky-navigation/#comment-184292*/ Header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; } // fix mobile nav .Mobile-bar--top { position: fixed; top: 0; left: 0; right: 0; background: #173d56; } .Mobile-bar { position: fixed; z-index: 99999; } // move mobile overlay down .Mobile-overlay-menu-main { padding-top: 80px; } any help would be GREATLY APPRECIATED link to site