Jump to content

Trigger logo to appear when nav hits top of page

Recommended Posts

  • Replies 16
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Only the logo or the entire top nav?

Link to comment

Sorry, I don't understand.

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

Link to comment

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

Link to comment

Can you share the custom code?

Link to comment

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

Link to comment

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

Screenshot 2024-03-10 at 12.50.47 PM.png

Screenshot 2024-03-10 at 12.50.55 PM.png

Link to comment

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

Link to comment

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. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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