stevez59 0 Share Posted January 25, 2020 Hey! Wondering if I could get some code help on the site I design. https://www.zdigital.com/ I want to fix the nav to the top of the page when a user scrolls past the header, turning into a new color. #333333 Could not get the code in other posts to work for me on my site. I already have the following in CSS for other things. Not sure if I would need to change any of It if I'd need to body { text-align: justify }; p, h1, h2, h3 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; }; .collection-5e150xxxxx .transparent-header.view-list .banner-thumbnail-wrapper, .transparent-header.collection-type-page .banner-thumbnail-wrapper { padding: 120px 0 80px; }; .sqs-block.form-block .form-wrapper input[type=submit], { background-color:#044971; color:#fff} .sqs-block.form-block .form-wrapper:hover input[type=submit], { background-color:#066399;color:#FFF }; Link to post
0 tuanphan 9,570 Share Posted February 1, 2020 Have you fixed yet? 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 tuanphan 9,570 Share Posted March 14, 2020 Fix the nav to the top of the page when a user scrolls past the header, you can use CSS header#header { position: fixed !important; top: 0; z-index: 999; left: 0; right: 0; } turning into a new color You need to use JavaScript, complicated 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 Peakwalker 1 Share Posted March 22 (edited) On 3/14/2020 at 5:43 AM, tuanphan said: Fix the nav to the top of the page when a user scrolls past the header, you can use CSS header#header { position: fixed !important; top: 0; z-index: 999; left: 0; right: 0; } turning into a new color You need to use JavaScript, complicated I am also interested in a similar feature. Currently I have the correct CSS installed to make the header sticky but I would like additional code so the header background color it increases in opacity once it is scrolled past the banner image. Is there anywhere to find a solution for this? Edited March 22 by Peakwalker Link to post
0 tuanphan 9,570 Share Posted March 24 On 3/22/2021 at 8:47 AM, Peakwalker said: I am also interested in a similar feature. Currently I have the correct CSS installed to make the header sticky but I would like additional code so the header background color it increases in opacity once it is scrolled past the banner image. Is there anywhere to find a solution for this? Hi. Can you share link to your site? We can check easier 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
Question
stevez59 0
Hey! Wondering if I could get some code help on the site I design. https://www.zdigital.com/
I want to fix the nav to the top of the page when a user scrolls past the header, turning into a new color. #333333
Could not get the code in other posts to work for me on my site.
I already have the following in CSS for other things. Not sure if I would need to change any of It if I'd need to
body { text-align: justify }; p, h1, h2, h3 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; }; .collection-5e150xxxxx .transparent-header.view-list .banner-thumbnail-wrapper, .transparent-header.collection-type-page .banner-thumbnail-wrapper { padding: 120px 0 80px; }; .sqs-block.form-block .form-wrapper input[type=submit], { background-color:#044971; color:#fff} .sqs-block.form-block .form-wrapper:hover input[type=submit], { background-color:#066399;color:#FFF };Link to post
Top Posters For This Question
3
2
1
Popular Days
Mar 22
1
Jan 25
1
Mar 24
1
Feb 1
1
Top Posters For This Question
tuanphan 3 posts
stevez59 2 posts
Peakwalker 1 post
Popular Days
Mar 22 2021
1 post
Jan 25 2020
1 post
Mar 24 2021
1 post
Feb 1 2020
1 post
5 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