stevez59 Posted January 25, 2020 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 comment
tuanphan Posted February 1, 2020 Share Posted February 1, 2020 Have you fixed yet? 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
tuanphan Posted March 14, 2020 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.). 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
Peakwalker Posted March 22, 2021 Share Posted March 22, 2021 (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, 2021 by Peakwalker Link to comment
tuanphan Posted March 24, 2021 Share Posted March 24, 2021 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.). 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment