Jump to content

Active Link Issues with my custom code

Recommended Posts

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!

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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}

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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!

Link to comment
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//

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.