scratchdiskfull 1 Share Posted February 26 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 post
0 creedon 780 Share Posted February 26 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. scratchdiskfull 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to post
0 scratchdiskfull 1 Author Share Posted February 27 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 post
0 creedon 780 Share Posted February 27 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. scratchdiskfull 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to post
0 scratchdiskfull 1 Author Share Posted February 27 Creedon, Thank you SO MUCH for your help. It works! creedon 1 Link to post
0 scratchdiskfull 1 Author Share Posted March 7 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 workinghttps://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 post
0 tuanphan 9,537 Share Posted March 7 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 workinghttps://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 :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 scratchdiskfull 1 Author Share Posted March 7 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! Link to post
0 creedon 780 Share Posted March 8 Did you copy the script over that adds/removes the class? Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to post
Question
scratchdiskfull 1
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 post
Top Posters For This Question
5
3
1
Popular Days
Feb 27
3
Mar 7
3
Feb 26
2
Mar 8
1
Top Posters For This Question
scratchdiskfull 5 posts
creedon 3 posts
tuanphan 1 post
Popular Days
Feb 27 2021
3 posts
Mar 7 2021
3 posts
Feb 26 2021
2 posts
Mar 8 2021
1 post
Popular Posts
creedon
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 pag
creedon
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-transit
scratchdiskfull
Creedon, Thank you SO MUCH for your help. It works!
Posted Images
8 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment