Jump to content

Would like to make nav bar and possibly small logo only appear after header scrolls to top of page for mobile.

Recommended Posts

Posted (edited)

Hello,

I am still pretty new at this but feel I have done ok thus far.

Here is what I am trying to achieve.

I have a rolling sticky header that I would like to be invisible until it hits the top of the page on my mobile site.  The reason is because if I stop half way through the scroll and hit the nav bar, the logo will land in various positions sometimes covering the links and it looks funny and inconsistent.  The 2 ways I'd like to see this is either (A) The whole header is invisible until it sticks, or (B) Only the navigation bar is invisible until it sticks.

I figure if it only appears when the header sticks to the top it will avoid this issue of clicking on the nav bar and looking funny.  Of course, if anyone has a different idea I'd like to hear it.

The website is www.buriedband.com > Home v2 in nav menu

pw: 666

Thanks in advance and your time and knowledge.

Edited by Buried
title
Link to comment
  • Buried changed the title to Would like to make nav bar and possibly small logo only appear after header scrolls to top of page for mobile.
  • Replies 4
  • Views 204
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

3 hours ago, Buried said:

Hello,

I am still pretty new at this but feel I have done ok thus far.

Here is what I am trying to achieve.

I have a rolling sticky header that I would like to be invisible until it hits the top of the page on my mobile site.  The reason is because if I stop half way through the scroll and hit the nav bar, the logo will land in various positions sometimes covering the links and it looks funny and inconsistent.  The 2 ways I'd like to see this is either (A) The whole header is invisible until it sticks, or (B) Only the navigation bar is invisible until it sticks.

I figure if it only appears when the header sticks to the top it will avoid this issue of clicking on the nav bar and looking funny.  Of course, if anyone has a different idea I'd like to hear it.

The website is www.buriedband.com > Home v2 in nav menu

pw: 666

Thanks in advance and your time and knowledge.

You can try the following custom CSS

#header.shrink .header-mobile-logo a{
  opacity: 0;
  pointer-events: none;
}

when you scroll down, the logo will fade. Only it reaches top of the page, logo will appear

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
11 minutes ago, Beyondspace said:

You can try the following custom CSS

#header.shrink .header-mobile-logo a{
  opacity: 0;
  pointer-events: none;
}

when you scroll down, the logo will fade. Only it reaches top of the page, logo will appear

Fantastic I will give this a try.  Thank you for taking time to do this.  Question...  if I want this to happen on a certain page do I inject this in the selected page > page settings > advanced > page header code injection?

I already have this code in there, do I add a line inside <style> with this code?  Thank you.

<style>
.header { 
    position: sticky!important; 
    top: 0px; 
    margin-top:93vh; 
    border-top: 1px solid #000 
    } 

    #page .page-section:nth-child(1){ 
    margin-top: -115vh; 
    height: 100vh; 
    margin-bottom: 0vh }
</style>

Link to comment
2 minutes ago, Buried said:

Fantastic I will give this a try.  Thank you for taking time to do this.  Question...  if I want this to happen on a certain page do I inject this in the selected page > page settings > advanced > page header code injection?

You should wrap my code with <style></style> before putting them on page header code

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
2 hours ago, Beyondspace said:

You should wrap my code with <style></style> before putting them on page header code

So I gave it a go and placed your code (wrapped with <style></style> under my other code.

What is seems to do is remove the logo until I scroll back down to its originating position.  What I'd like to have happen is for the logo and navigation bars to be invisible until the header scrolls up and sticks to the top of the webpage.  What kind of change can I make within your code to make that happen?

Thanks again.

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.