Jump to content

Demian

Member
  • Posts

    9
  • Joined

  • Last visited

Everything posted by Demian

  1. Okay, did some digging and managed to figure this last little tweak out myself - whereby I wanted the effect to only apply to the homepage. Thought I'd post in case anyone else stumbles across this. You'll need to find out the collection ID of the homepage (or page you want this effect to be specific to). You can do this using the inspect function of your browser. Find body id= (very near the top of the code) and you'll want to copy "collection" and the long string of letters and numbers afterwards, eg. "collection-5fab8b7a8424282166b75a81" Once you have that copied into your clipboard go to the Custom CSS area of your site. You need to wrap #collection-5fab8b7a8424282166b75a81 (where that long string is your own copied collection id) around the code that @bangank36 provided. So it would look something like: #collection-5fab8b7a8424282166b75a81 { header:not(.shrink) .header-nav-wrapper a { color: #fff !important; } header:not(.shrink) .header-title-logo img { filter: brightness(0) invert(1); } header:not(.shrink) .header-nav-folder-content { background-color: transparent !important; } } Violá!
  2. Holy moly @bangank36! That is some elegant and creative code - I love that you used a filter to change the logo color. I was expecting to need jquery and I love that it doesn't. Truely excellent. There is one quite significant problem however, in my original post I wrote "On the homepage only" What I meant was that I only want this behaviour on the homepage. Everywhere else I want the navigation to use the pink on white BG version - what the navigation changes to once scrolling has commenced. Reason being is that all other pages on the website have a white BG so, as it is now, the nav can't be seen. You can see this on the Contact page for example, or the About page where the nav can't be seen until you scroll the page down and it changes to pink on white BG. So to be clear, on the page named "home" I want the nav to begin as White with a transparent BG and then, once scrolling has begun, I want the nav to change to pink with a white BG (this part is happening perfectly now, thanks to you). On all other pages I want the nav to always appear pink with a white BG - there is no need for it to change color (this is the part that is not happening). Is this still possible? Thanks again for your time and knowledge!!
  3. Site URL: https://www.ballihoo.co.za/home Okay, this is a pretty specific question but the use case is actually quite common from a design perspective. To explain: I have a white BG navigation with pink logo (PNG) and text/links. It also uses the Transparent option under Edit Site Header > Colors. This is of course throughout the site and works great for the most part, but... On the homepage only, I want to have the navigation start as white text on transparent (as it sits on top of a darkish full bleed hero image) and then once the BG of the navigation fades in (a built in function of setting the navigation to Transparent) I want the text and logo to change to pink. It's a bit tough to put in words so hopefully the images and link help to covey the request. And this change would have to be able to be applied to the drop-downs from foldered nav items, because this looks awful...
×
×
  • 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.