Hello

How do I make the logo appear when the nav hits the top of the page, instead of appearing as soon as I scroll?

https://toucan-tetra-fwm2.squarespace.com/
p: argus

Only the logo or the entire top nav?

Both. The nav should move up on scroll. When it hits the top of the page, the nav stays visible but the smaller logo slides into place. 

Sorry, I don't understand.

Are you referring to the large logo on top of the page or the logo from the fixed navigation?

I'm referring to the smaller logo.

On page load, you'll notice the large red ARGUS logo at the top with menu links below. Once you scroll, the larger logo will go out of the viewport. When the menu bar (below the large logo) hits the top of the page, the small logo should slide into place in the top left corner of the menu bar.

I currently have it developed and working as it should, but the smaller logo appears too soon. It appears as soon as I start scrolling/before the menu bar hits the top of the page. 

https://toucan-tetra-fwm2.squarespace.com/
p: argus

Can you share the custom code?

Basically, the small logo should stay visible when you scroll to top and see the large logo?

Nope. The small logo should not be visible until the menu bar hits the top of the viewport. When the menu bar hits the top of the viewport, then the little log slides into place.

I added 2 screenshots:

1. Screenshot 1: How the page looks on load. Notice the small logo is not present. This is correct.

2. Screenshot 2: I started scrolling, but the small logo has already appeared. I do not want this. The small logo should appear when the menu bar hits the top of the screen. This is not correct.

//logo slide

.homepage .header-title-logo, .homepage .header-mobile-logo a {
    opacity: 0;
    position: relative;
    top: -10vh;
    transition: all .75s;
}
.homepage .shrink .header-title-logo, .homepage .shrink .header-mobile-logo a {
    opacity: 1;
    position: relative;
    top: 0;
}

//logo slide

Hi @orkoellis, 

I am not in any capacity an expert, but try to add at the end of your code (after your "  top: 0;) transition: all 1.5s ease-in-out; 

or transition-delay: 1s; 

Thank you. This only added a delay. I'm looking for the logo to appear/trigger once the menu bar hits the top of the browser. 

I see. 

Then use a Jquery Script  🙂 ajdust with the value thta would suit you best : I set 200 by exmple below... but maybe 100will be enough... do not know)- and of cours adjust the transition times. 

<script>

$(window).scroll(function(){

var scroll = $(window).scrollTop();

if(scroll > 200){

$('header#header').addClass('showlogo');

}

else{

$('header#header').removeClass('showlogo');

  }

});

</script>

then update your CSS codes with maybe :

.homepage .shrink .header-title-logo, .homepage .shrink .header-mobile-logo a {
    opacity: 0;
    position: relative;
    top: 0;

transition:  all .75s;
}

.homepage .showlogo .header-title-logo, .homepage .showlogo .header-mobile-logo a {
    opacity: 1;
    position: relative;
    top: 0;

transition: transition: all .75s;
} 

you need to add the Jquery library. in the Website level code injection either header or Footer (that shoudl be confirmed by someone like a circle member). 

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Thank you very much. That worked great! You're also the only one who understood what I was trying to do. Thank you.

Take a look if you want:

https://toucan-tetra-fwm2.squarespace.com/

p: argus

Ah ah! that is because I tried for my own website ( building it at present) a similar effect ( and I have not yet totally mastered to achieve what I want!). 

It seems there is one missing piece though : at present, your website still shows the small logo at start of loading the page. 

You should add in the css : 

homepage  .header-title-logo, .homepage  .header-mobile-logo a {
    opacity: 0;
    position: relative;
    top: 0;

transition:  all 0.3 s;
}

Then it should be as you wished it. 

You know, I woke up this morning and saw that. It was working like a charm yesterday. Maybe I deleted something at some point. But it's now working again. Thanks for your help. Genius level!

Although, now it appears as soon as I scroll even with the adjustments you suggested. What did I F up? It was working so well yesterday!

I can see that . Now it is working perfect. I am glad I could help. 

This is the closest thing I could find in regards to what I am trying to achieve.  I am also very new to this.  Question...  where do I inject these scripts?  I have a site and trying to achieve a scrolling header that sticks to the top.  I have achieved that part by adding some code in the page>advanced>code injection so that it is only on that one page.  What I am trying to do is make the nav bar be invisible until it sticks to the top I might also have the small logo do the same but would like to see what my options look like.  Right now if I stop half way to through the scroll and hit the nav bar on my phone, the small logo also appears and depending where I stop it will lay over the navigation links.  I was hoping to find a way for the nav bars to come up once I hit the top of the page.  If it helps, the website is www.buriedband.com pw: 666 go to Home v2.

Thanks and sorry to jump into this thread.