noblestudio

On 1/23/2024 at 9:51 AM, tuanphan said:

You mean

Make logo invisible on first section

and make it visible on other sections on current page?

 

Hi @tuanphan Yes, exactly. Let me know if it's possible. 

Thank you! 

On 1/15/2024 at 9:50 AM, noblestudio said:

Hi @tuanphan thanks for this! The code works, but is there anyway to make the logo in the header invisible when the user reaches the first section of the homepage on scroll back (with logo artwork)? see attached reference. The code you've provided hides the logo on scroll back on other sections but need this needs to be visible on every other section apart from the first. If it helps, this is a good reference: https://giancarlovalle.com/ 

Let me know if it's feasible, and thanks again!

N

Hi @tuanphan not sure if you managed to work this out? Would be great to get an update, thank you! 🙂 

On 1/14/2024 at 3:47 AM, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>
  $(function(){
 var visibleTop = 50;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('body').addClass('hide-logo');
        }
        else {
            $('body').removeClass('hide-logo');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  body.hide-logo header#header img {
    visibility: hidden;
}
</style>

 

Hi @tuanphan thanks for this! The code works, but is there anyway to make the logo in the header invisible when the user reaches the first section of the homepage on scroll back (with logo artwork)? see attached reference. The code you've provided hides the logo on scroll back on other sections but need this needs to be visible on every other section apart from the first. If it helps, this is a good reference: https://giancarlovalle.com/ 

Let me know if it's feasible, and thanks again!

N

On 1/10/2024 at 3:15 AM, tuanphan said:

When scrolling, SS adds a new class so we can target the state before scrolling and while scrolling

If you disable fixed header, SS does not add this class, you will need to use JavaScript to add scroll class.

You can share link to your site, we can check & adjust code easier

Hi @tuanphan Sorry to chase, did you figure this out? Much appreciated 🙂

thanks @tuanphan 

Link to site: https://point-cyan-jzwc.squarespace.com/

pw: snc2024

I would prefer the logo in header to disappear very quickly before user scrolls back at the halfway point of the hero image – as I plan to add a large logo here. The navi links can remain.

I would only need this for the homepage and desktop/ipad screens only. The navi bar is also currently set to white, if you can adapt to make it transparent, that would be great as the links are white as well. 

Feel free to give me a shout if you need to know anything else – thank you in advance! 

N

This is a very helpful code snippet however, is there a solution for non-fixed position headers? I find SS's fixed header function, whether on basic or scroll back, also adds a small jump before reaching the top of the site page, not sure why that happens. 

Cheers! 
N

@tuanphan Yes, thank you! I think this trick appeared on another topic from you so I tried it and it worked out nicely. 

On 12/17/2023 at 9:17 AM, noblestudio said:

Hey @tuanphan 

I have to keep it private as the domain is linked, try with this link:

https://chrysalis-carrot-edlx.squarespace.com/

pw: as2023

Thanks!

Hi @tuanphan Did you manage to access the site ok? Any luck with this odd white space? 

Hey @tuanphan 

I have to keep it private as the domain is linked, try with this link:

https://chrysalis-carrot-edlx.squarespace.com/

pw: as2023

Thanks!

Hello All, 

I've encountered an annoying problem with a site i'm building. I've uploaded a video to the homepage that needs to span 100% of the height and width of the screen.

Not sure if I need to set the section's height to a row count and adjust optically or toggle the "fill screen" function? Either way, when using fill screen/grid there seems to be some white padding that appears when you shrink the screen to adjust. See attached photo. When inspecting this page, it seems the white space is part of the wrapper?

Some links that i've positioned to the bottom of the screen don't show up in some mobile devices and need to be scrolled to be seen. The responsive function on single section websites isn't great, I have to say. I can't seem to solve the issue.

site: https://chrysalis-carrot-edlx.squarespace.com/
pw: as2023

Any help? 🙏🏼

Cheers! 
Nabil

Hi All, 

Facing an issue with my fixed header. I have a hero image gallery that's positioned as sticky so that the subsequent sections overlap when you scroll. The problem i'm trying to solve is regarding the z-index. The header seems to be positioned at the very top and ideally would prefer it if the entire header were positioned under the layer that overlaps it when you scroll – any help? 

Site link: https://lobster-lute-a5jp.squarespace.com/

PW: tp2023

Much appreciated! ✌🏽

@tuanphan Thanks for the tip! 

@AAStudio Hey Ashley! I found the solution, I recommend checking your text/button blocks to make sure the ones that are linked aren't placed under other blocks especially when the site goes into mobile view. In my case, the project names (see above screen shots) were linked, the location and dates weren't so when the site went into mobile view, the latter were placed on top by default, hence why I couldn't press the links! I just arranged the linked text blocks to sit on top. 

Hope this helps! 

N

Hi All, 

I have a very simple query regarding page links in mobile. For some apparent reason, the links on my projects page are only functioning in desktop not mobile. I have linked the projects to their respective pages but unable to click through when viewing the site in mobile – specifically the links between the lines.

I have disabled underlines throughout the site, there is also a hover over function on desktop where the cursor enlarges when you hover over a linked item or word. For example the 'Work with us' seems to be working fine. 

I have double checked my CSS code, it all seems fine? 

Any help would be greatly appreciated! 

site link: https://www.nobleco.studio/projects

Thanks, N

Hey @Ziggy, thanks for your feedback! This is super helpful, so thank you for pointing it out. I've taken your advice and moved the 'discover' links so now all text pieces live in one block, which also eliminates the need for endless media queries! 

Keep text boxes larger than necessary – great tip, noted and updated!

Thanks again, really appreciate it! ✌🏽

Nabil 

Dear Circle members, 

I had the pleasure of working with a New York-based Yoga teacher who wanted to level-up her image and create a modern website experience. The site was built using Fluid Engine, with a host of custom css features, which at times proved very challenging! As a designer, I think there's definitely more freedom to create bespoke layouts using Fluid but it could definitely do with some improvements! 

I would welcome any feedback/comments on the site https://www.carlyhunteryoga.com/ 

Cheers! ✌🏽

Wonderful! Thank you @tuanphan

For some reason, my testimonial 'titles' don't seem to want to change, i've tried all the above but to no avail, any help? : / 

The content description seems to be adjusting fine. I have the testimonial block on various pages across my site, so i'm just using the section data to repeat the style application, here is my code

@media screen and (max-width: 767px) {
section[data-section-id="63fcaf3b6a9d921f53ad978d"], section[data-section-id="63ff7893e414330ac2fc9456"] { 
.list-item-content__description * {
    font-size: 12px!important;
  line-height: 15px!important
}
  }
}

link to site: https://gardenia-chicken-h6l8.squarespace.com/ 
pw: demo

The testimonials banner slideshow is located at the bottom of the homepage. 

Thank you in advance! N

Hi @tuanphan yes of course, there is currently a holding page live. 

Links to the website: 
https://www.studiorhl.com/home-copy 
https://potato-lime-5lwd.squarespace.com/home-copy

Thanks, N

On 12/21/2022 at 12:43 AM, tuanphan said:

Can you enable Fixed Header first? Then we can do it easier

No problem, fixed header position is enabled – thank you! 

N

Hi @tuanphan 

Yes exactly, from white to black but only when the white background touches the header. The site is on a business plan. 

https://potato-lime-5lwd.squarespace.com/config/settings/site-visibility
pw: studiorhl

I've uploaded both logo files in white and black in the CSS custom files. 

lmk if you need anything else from my end?

Thank you! N

Hi All, 

I'm trying to achieve a similar effect to the above but with the logo and navigation text changing colour on scroll after the first section of my site (hero), and to the homepage only. 

The colours are currently set to black (logo and navigation links) but I can set these to white. I need these to change to black once the background scrolls to the white section of the homepage/touches the header.

Is this achievable with CSS or do I need JS?

url: https://www.studiorhl.com/home-copy

Many thanks! N

Hi All, I tried all the above for a client's site that's still using 7.0 but failed to work. I managed to pull up some code on the inspect mode and tried this which worked like a dreamboat! Copy and paste this into your CSS and it will remove the Blog title from your blog page only. Example here.

If you have a Blog page or summary blocks displaying the stories elsewhere on your site, (as I have) those will remain in place. Hope this helps! 

/* remove blog title from blog page*/

.tweak-blog-item-alignment-center .BlogItem-title {
    text-align: center;
    display: none;
}
 

On 10/2/2021 at 10:02 AM, HumDes94 said:

@noblestudio Hiya, a bit late to this thread but was wondering if you managed to figure this out??? This is exactly what I want to do with my site by can't find out how anywhere! 

Thanks 🙂

Hey @HumDes94 sorry about the late reply!

I got a coder to do this for me in the end! It's quite straight forward and didn't involve java. 

Have a good week! 😊

@tuanphan Hi! I don't suppose you know how to achieve this if I want to set a non-linked page as the opening page, that loads to the homepage after a delay? I've created the page already, it has a scrolling marquee effect that i'd like to have when the user lands on the site for the first time. I've attached a video if you need to take a look. 

site: https://www.sundayservice.agency/ pw: sunday2021

This is the desired style I would like to achieve: https://www.lockstudios.co.uk/ 

Many thanks in advance! 

Nabil 

15 hours ago, noblestudio said:

Sorry! here's the url: https://trombone-bumblebee-yms9.squarespace.com/products password as above.

Cheers! @tuanphan 

@tuanphan Managed to find the solution from another thread that was resolved by you! It seems when using this code to customise the size for product category title, it becomes responsive in mobile – which is great!

/* category title size */
h3.nested-category-title {
    font-size: 42px !important;
}

Thanks for the help! 

N