How to fix navigation menu bar *only* without logo to top of page when scrolling.

Site URL: https://presenttensebar.squarespace.com

Hi there,

I'm working in the Crosby template, and I'd like to remove the logo from the header when scrolling down past the homepage, leaving only a thin navigation bar at the top. Within the homepage, I've got different sections/links set up with anchor links within the homepage, but when scrolling down the full header with logo is too tall and blocks content. 

I've searched the forum but haven't found an answer yet. I'm trying to mimic the functionality of this site: http://www.lostlakechicago.com/

Site link:  https://presenttensebar.squarespace.com 

Password:  Derek

Thanks so much!

Add to Home > Design > Custom CSS

/* Remove logo on scroll */
.shrink .header-title {
    display: none;
}

Hey @tuanphan on the same topic, is there a code to do the oppsite? i.e have no logo show at first but add logo on scroll?

thanks so much!!

On 9/30/2021 at 11:04 PM, hannah.dossary said:

Hey @tuanphan on the same topic, is there a code to do the oppsite? i.e have no logo show at first but add logo on scroll?

thanks so much!!

Add to Design > Custom CSS

header#header:not(.shrink) img {
    display: none;
}

amazing!! thats perfect. 

any chance there's additional code to add to make this only happen on the homepage? no problem if not.

thanks again 🙂

22 hours ago, hannah.dossary said:

amazing!! thats perfect. 

any chance there's additional code to add to make this only happen on the homepage? no problem if not.

thanks again 🙂

Use this

body.homepage header#header:not(.shrink) img {
    display: none;
}