Active Link Issues with my custom code

Site URL: https://www.pagliaccifilm.com/bio

Hello!

I'm having problems with my active links in my fixed nav. It's not staying active on the page once it scrolls to the fixed page.

Below is the code. (I bolded the line) 

PW for site: divodavid2021

.Header {
  position: fixed!important;
  z-index: 1000;
  width: 100%;
}

.Header-inner {
  padding-top: 50px;
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.Header.scrollNav {
  background: #fff!important;
  padding-bottom: 10px;

  .Header-inner {
    padding-top: 10px!important;
  }

  .Header-branding {
    color: #000;
  }

  .Header-nav a {
    color: #000!important;

    &:hover {
      color: #db9271!important;
    }
        &:active {
      color: #db9271!important;
    }
  }
}

THANK YOU!

The :active selector only changes the link while the link is being clicked on. Not after the link has been clicked. Please see CSS :active Selector

To change the active link, i.e. the current page you are on use the SS supplied class ".Header-nav-item--active".

Let us know how it goes.

Greetings! 

Thanks for the speedy response. I'm quite the novice at this, so I'm not sure where to put that line, or if it matters. Can it go anywhere? I tried the following, and it's not working. I removed it from the lines of code, and put it at the bottom. Should I put it somewhere else? I bolded below.

Thank you!

.Header {
  position: fixed!important;
  z-index: 1000;
  width: 100%;
}

.Header-inner {
  padding-top: 50px;
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.Header.scrollNav {
  background: #fff!important;
  padding-bottom: 10px;

  .Header-inner {
    padding-top: 10px!important;
  }

.Header-branding {
    color: #000;
  }

.Header-nav a {
    color: #000!important;

    &:hover {
      color: #db9271!important;
    }
  }
}

.Header-nav-item--active {
    color: #db9271}

Let's see if this gets you there.

.Header {
  position: fixed !important;
  z-index: 1000;
  width: 100%;
  }

.Header-inner {
  padding-top: 50px;
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  }

.Header.scrollNav {
  background: #fff !important;
  padding-bottom: 10px;

  .Header-inner {
    padding-top: 10px !important;
    }
    
  .Header-branding {
    color: #000;
    }
    
  .Header-nav a {
    color: #000 !important;
    
    &:hover {
      color: #db9271 !important;
      }
    }
    
  a.Header-nav-item--active {
    color: #db9271 !important;
    }
  }

Let us know how it goes.

Creedon,

Thank you SO MUCH for your help. It works!

It's me again!

I'm in the middle of migrating this website over to the real website, and I cannot seem to get this code to work. My scroll nav is not fixed any longer, and I'm wondering what I did wrong. 

Site URL Where it's currently working
https://www.pagliaccifilm.com/
PW for site: divodavid2021

Site URL Where I'm trying to move it and it's not working
I want the above website to look exactly like this one, and it's not responding. I'm wondering if I didn't set up my CSS tags right, or they are different in this set up.
https://divodavid.com/home-new

.Header {
  position: fixed !important;
  z-index: 1000;
  width: 100%;
  }

.Header-inner {
  padding-top: 50px;
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  }

.Header.scrollNav {
  background: #fff !important;
  padding-bottom: 10px;

  .Header-inner {
    padding-top: 10px !important;
    }
    
  .Header-branding {
    color: #000;
    }
    
  .Header-nav a {
    color: #000 !important;
    
    &:hover {
      color: #db9271 !important;
      }
    }
    
  a.Header-nav-item--active {
    color: #db9271 !important;
    }
  }

Thanks for your help!

4 hours ago, scratchdiskfull said:

It's me again!

I'm in the middle of migrating this website over to the real website, and I cannot seem to get this code to work. My scroll nav is not fixed any longer, and I'm wondering what I did wrong. 

Site URL Where it's currently working
https://www.pagliaccifilm.com/
PW for site: divodavid2021

Site URL Where I'm trying to move it and it's not working
I want the above website to look exactly like this one, and it's not responding. I'm wondering if I didn't set up my CSS tags right, or they are different in this set up.
https://divodavid.com/home-new

.Header {
  position: fixed !important;
  z-index: 1000;
  width: 100%;
  }

.Header-inner {
  padding-top: 50px;
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  }

.Header.scrollNav {
  background: #fff !important;
  padding-bottom: 10px;

  .Header-inner {
    padding-top: 10px !important;
    }
    
  .Header-branding {
    color: #000;
    }
    
  .Header-nav a {
    color: #000 !important;
    
    &:hover {
      color: #db9271 !important;
      }
    }
    
  a.Header-nav-item--active {
    color: #db9271 !important;
    }
  }

Thanks for your help!

I see it is sticky here//

Yes! It is sticky! I didn't use my words correctly. on the other website, (pagliaccifilm.com) once I scroll past a certain point, it creates a white banner at the top. I have somehow broken that piece of it. Ill keep going and maybe I can identify where I went wrong. Thanks!

Did you copy the script over that adds/removes the class?