Jump to content

noblestudio

Circle Member
  • Posts

    35
  • Joined

  • Last visited

Posts posted by noblestudio

  1. 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

    Screenshot 2024-01-15 at 09.43.16.png

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

  2. 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

    Screenshot 2024-01-15 at 09.43.16.png

  3. 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 🙂

  4. 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

  5. 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

    image.thumb.png.4b7a87717498dfbe8298998ca661cdd4.png

    Screenshot 2023-12-15 at 17.36.08.png

  6. 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! ✌🏽

  7. @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

  8. 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

    Screenshot 2023-06-22 at 13.25.33.png

    Screenshot 2023-06-22 at 13.25.40.png

  9. 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 

  10. 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! ✌🏽

  11. 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

     

  12. 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

  13. 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;
    }
     

     

  14. 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! 😊

  15. @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 

×
×
  • 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.