Fixed navigation bar + scrolling

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

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

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

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?

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

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>

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

Perfect! Thanks Tuanphan, for all your help. 😃

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/

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

http://davidzamorano.tv/

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

http://davidzamorano.tv/inc

4. (Tablet – Fun) Increase text width?

http://davidzamorano.tv/fun

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

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.

Ok, I see. No worries and thanks!

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

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.

 

 

 

Hi,

Which page do you have problem? We can check easier