Jump to content

Fixed navigation bar + scrolling

Go to solution Solved by tuanphan,

Recommended Posts

Posted

Hi!

Is there any way to fix the header and navigation bar always on top of the screen as I scroll down my main page? It is currently on top of my site and disappears as soon as I scroll down.

I'm using Foster template and my site is: davidzamorano.tv

Any suggestion would be appreciated.

Thanks,

David

Posted
3 hours ago, dzamorano said:

Hi!

Is there any way to fix the header and navigation bar always on top of the screen as I scroll down my main page? It is currently on top of my site and disappears as soon as I scroll down.

I'm using Foster template and my site is: davidzamorano.tv

Any suggestion would be appreciated.

Thanks,

David

Add to Design > Custom CSS

/* sticky header */
header.Header.Header--top {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 9999;
}

 

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!)

Posted

Thanks so much Tuanphan! That's great.

Just one doubt; is there any way I can control the percentage of white in the background of the navigation bar as it scrolls down? Just to avoid the hard white on white patch throughout.

Thanks again for all your help.

David

Posted
15 hours ago, dzamorano said:

Thanks so much Tuanphan! That's great.

Just one doubt; is there any way I can control the percentage of white in the background of the navigation bar as it scrolls down? Just to avoid the hard white on white patch throughout.

Thanks again for all your help.

David

You mean change header background on scroll? Do/will you use Personal or Business Plan?

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!)

Posted
23 hours ago, dzamorano said:

Yes. Change header background (or just control its opacity) on scroll. I have an annually business plan. Thanks!

don't remove above cdoe. Add this to Settings > Advanced > code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 50;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header.Header').addClass('tuan');
        }
        else {
            $('header.Header').removeClass('tuan');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  header.Header.Header--top.tuan {
    background-color: green;
}
</style>

 

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!)

Posted

Thanks for this.

The colour is changing but what I'm really looking for is being able to control the opacity of the header colour (Sorry if I was not clear on the last post).

The whole idea is to maintain the background header colour throughout,  but make it transparent when scrolling down or being able to control/decrease its opacity.

 

Thanks again! 

David

 

  • Solution
Posted
On 7/28/2021 at 9:52 PM, dzamorano said:

Thanks for this.

The colour is changing but what I'm really looking for is being able to control the opacity of the header colour (Sorry if I was not clear on the last post).

The whole idea is to maintain the background header colour throughout,  but make it transparent when scrolling down or being able to control/decrease its opacity.

 

Thanks again! 

David

 

you can change green to rgba color

eg: rgba(255,255,255,0.5)

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!)

Posted
On 7/30/2021 at 5:02 PM, dzamorano said:

Perfect! Thanks Tuanphan, for all your help. 😃

Do you need to fix these?

Site URL – http://davidzamorano.tv/

1. (All devices) The word “not secure” appears in the browser’s address bar.

http://davidzamorano.tv/

davidzamorano.tv-01-min.png

2. (Desktop – Header) The header is transparent so when scrolling down, the menu overlaps the text below.

http://davidzamorano.tv/

davidzamorano.tv-02-min.png

3. (Tablet – Inc) Reduce space below footer?

http://davidzamorano.tv/inc

davidzamorano.tv-03-min.png

4. (Tablet – Fun) Increase text width?

http://davidzamorano.tv/fun

davidzamorano.tv-04-min.png

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!)

Posted

Hi Tuanphan! Thanks for these and for all you help.

Yes, I'd be happy if you could help me amend all those points. 

Also, I was thinking of adding the animated "Slide Up" feature to all project images (and gifs if possible) on my main page, so they reveal as you scroll down. I was kind of able to use that option on my /fun page, but I was not it able to add the "Slide up" animation to gifs... Do you know how can I solve this?

Thanks again,

David

Posted
11 hours ago, dzamorano said:

Hi Tuanphan! Thanks for these and for all you help.

Yes, I'd be happy if you could help me amend all those points. 

Also, I was thinking of adding the animated "Slide Up" feature to all project images (and gifs if possible) on my main page, so they reveal as you scroll down. I was kind of able to use that option on my /fun page, but I was not it able to add the "Slide up" animation to gifs... Do you know how can I solve this?

Thanks again,

David

Q1. Follow this

https://support.squarespace.com/hc/en-us/articles/205815898-Understanding-SSL-certificates

Q2. It looks like you fixed.

Q3. It looks like you haven't finished design on this page yet?

With Slide Up, I think this will require JavaScript code. I can't help with this.

 

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!)

  • 8 months later...
Posted
On 4/20/2022 at 5:49 PM, Meghna said:

Hi @tuanphan I am trying to do the same. I want to keep the header (navigation, logo, cart) fixed while scrolling down. I want to keep the background transparent as it is on the website now. 

but the above code doesn't seem to be doing working when i paste it. Please help

Website link 

https://www.szabosihag.com

Add to Design > Custom CSS

header.Header.Header--bottom {
    position: fixed;
    top: 0;
}

 

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!)

Posted
On 4/22/2022 at 3:50 PM, Meghna said:

HI 

It worked perfectly on home page but other pages are messed up. Its showing behind the images and on some pages. And on some pages navigation is not showing.

 

image.png.d8e02381ac52af93288b72852c548191.pngimage.png.cfc4fc94f2f2a0cc1e2fbc7793c8e4a2.png

 

 

Hi,

Which page do you have problem? We can check easier

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!)

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.