Jump to content

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

Recommended Posts

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!

Edited by rpru9
Link to comment
  • 2 weeks later...
  • Replies 5
  • Views 731
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 year later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.