pflombard Posted July 17, 2020 Share Posted July 17, 2020 Hey everyone! In 7.1, how would you set the header to a "Fixed position", on only one specific page? I.e., on all other pages it should disappear when you start to scroll. I've searched high and low and it appears that no one has addressed this issue yet. Any help would be greatly appreciated! Pierre Link to comment
rwp Posted July 17, 2020 Share Posted July 17, 2020 If you share your page I can get the actual code, but it will be something like #collection #header { position: fixed; } pflombard 1 Link to comment
pflombard Posted July 17, 2020 Author Share Posted July 17, 2020 48 minutes ago, rwp said: #collection #header { position: fixed; } Thanks so much rwp! This put me on the right path. I found the collection-id for that specific page. This is the end result that worked just great. #collection-5ef47e01a0680c5b1a28ecac #header { position: fixed !important; z-index: 1000; //in case it scrolls behind certain elements further down. background: #df4430; //because header was transparent. } rwp 1 Link to comment
Jimi Posted August 27, 2020 Share Posted August 27, 2020 How can I find out the collection-id? like the one you wrote: #collection-5ef47e01a0680c5b1a28ecac Thank you! Link to comment
IXStudio Posted August 27, 2020 Share Posted August 27, 2020 Hi @Jimi You can find it from Body Class and Body ID. Please use the like button if it helps you! Best, Leopold Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD Link to comment
Jimi Posted August 27, 2020 Share Posted August 27, 2020 (edited) Hi Leopold Thank you for your reply! How do I get to that info? Using my browsers "Inspect" ? Edited August 27, 2020 by Jimi Link to comment
IXStudio Posted August 27, 2020 Share Posted August 27, 2020 Hi @Jimi Yes, You can get this details via Inspect Element of your browser. Then target the body tag. You see ID and so huge! Class list there. Btw classes you can find collection also quick way is the ID of Body. Please use the like button if it helps you! Best, Leopold Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD Link to comment
Jimi Posted August 27, 2020 Share Posted August 27, 2020 I am putting that into my page header code injection but nothing happens... just this Link to comment
IXStudio Posted August 27, 2020 Share Posted August 27, 2020 @Jimi Please contact me via Skype: LeopoldJobs I'll check it for you. Please use the like button if it helps you! Best, Leopold Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD Link to comment
tuanphan Posted August 28, 2020 Share Posted August 28, 2020 19 hours ago, Jimi said: I am putting that into my page header code injection but nothing happens... just this Wrap code in style tag, add this to Page Header <style> #header { position: fixed !important; z-index: 1000; background: #df4430; } </style> IXStudio and bigpoppapaul 2 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
bigpoppapaul Posted December 1, 2020 Share Posted December 1, 2020 (edited) @tuanphan On 8/28/2020 at 11:52 AM, tuanphan said: Wrap code in style tag, add this to Page Header <style> #header { position: fixed !important; z-index: 1000; background: #df4430; } </style> How would I use this to have a NON-fixed header on only one page? Meaning usually the site has a fixed header but on only one page, I want it NOT to be fixed. In the code, what is the opposite of "fixed?" Edited December 1, 2020 by bigpoppapaul Link to comment
tuanphan Posted December 3, 2020 Share Posted December 3, 2020 On 12/1/2020 at 7:46 PM, bigpoppapaul said: @tuanphan How would I use this to have a NON-fixed header on only one page? Meaning usually the site has a fixed header but on only one page, I want it NOT to be fixed. In the code, what is the opposite of "fixed?" position: absolute !important; bigpoppapaul 1 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
Erlend-fs Posted March 11, 2021 Share Posted March 11, 2021 Similar issue. I´m using the fixed header on my site, with transparent background. So the header has no background color, unless you start scrolling. This is great, on my front page, I would like to have a background color to the header at all time. Is this possible? Link to comment
tuanphan Posted March 21, 2021 Share Posted March 21, 2021 On 3/11/2021 at 3:20 PM, Erlend-fs said: Similar issue. I´m using the fixed header on my site, with transparent background. So the header has no background color, unless you start scrolling. This is great, on my front page, I would like to have a background color to the header at all time. Is this possible? Hi. Can you share link to your site? We can help 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
Erlend-fs Posted March 22, 2021 Share Posted March 22, 2021 On 3/21/2021 at 1:52 AM, tuanphan said: Hi. Can you share link to your site? We can help easier Of course! https://spinach-keyboard-w7ws.squarespace.com Link to comment
tuanphan Posted March 24, 2021 Share Posted March 24, 2021 On 3/22/2021 at 4:22 PM, Erlend-fs said: Of course! https://spinach-keyboard-w7ws.squarespace.com Add to Design > Custom CSS /* header color */ header#header { background: blue !important; } 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
Erlend-fs Posted March 24, 2021 Share Posted March 24, 2021 Thanks for your reply tuanphan! I added the following code to the CSS, and the front-page now looks like this: /* header color */ #collection-602bc23de4dc477c940dd427 { header { background: rgba(55,59,61, 0.2) !important; }} As you can see, I've added transparency to the header, and I am happy with this (when you land on the front page.) But I want to remove the transparency "on-scroll" (the menu gets hard to read with content behind) Is it possible to add another color-code to the header "on-scroll"? Link to comment
tuanphan Posted March 25, 2021 Share Posted March 25, 2021 19 hours ago, Erlend-fs said: Thanks for your reply tuanphan! I added the following code to the CSS, and the front-page now looks like this: /* header color */ #collection-602bc23de4dc477c940dd427 { header { background: rgba(55,59,61, 0.2) !important; }} As you can see, I've added transparency to the header, and I am happy with this (when you land on the front page.) But I want to remove the transparency "on-scroll" (the menu gets hard to read with content behind) Is it possible to add another color-code to the header "on-scroll"? Use new code /* header color */ header#header.shrink { background: blue !important; } 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
Erlend-fs Posted March 25, 2021 Share Posted March 25, 2021 I'm now using these two codes, and it works fantastic!!!🤩 Thank you so much tuanphan!! /* header color- landing */ #collection-602bc23de4dc477c940dd427 { header { background: rgba(55,59,61, 0.1) !important; } } /* header color on scroll */ #collection-602bc23de4dc477c940dd427 { header.shrink { background: rgb(55,59,61,) !important; } } Link to comment
noblestudio Posted November 20 Share Posted November 20 Hi All, Facing an issue with my fixed header. I have a hero image gallery that's positioned as sticky so that the subsequent sections overlap when you scroll. The problem i'm trying to solve is regarding the z-index. The header seems to be positioned at the very top and ideally would prefer it if the entire header were positioned under the layer that overlaps it when you scroll – any help? Site link: https://lobster-lute-a5jp.squarespace.com/ PW: tp2023 Much appreciated! ✌🏽 Link to comment
SunHouse Posted November 22 Share Posted November 22 I have a similar issue to the one above. I want the fixed header only on the first two sections of the homepage. Is this possible to do? I tried assigning a higher z-index than header to the rest of the sections on the page, but it didn’t work. Link to comment
tuanphan Posted November 24 Share Posted November 24 On 11/21/2023 at 1:17 AM, noblestudio said: Hi All, Facing an issue with my fixed header. I have a hero image gallery that's positioned as sticky so that the subsequent sections overlap when you scroll. The problem i'm trying to solve is regarding the z-index. The header seems to be positioned at the very top and ideally would prefer it if the entire header were positioned under the layer that overlaps it when you scroll – any help? Site link: https://lobster-lute-a5jp.squarespace.com/ PW: tp2023 Much appreciated! ✌🏽 You mean header always sticky to top of page on scroll? On 11/22/2023 at 11:01 AM, SunHouse said: I have a similar issue to the one above. I want the fixed header only on the first two sections of the homepage. Is this possible to do? I tried assigning a higher z-index than header to the rest of the sections on the page, but it didn’t work. What is your site url? 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
SunHouse Posted November 24 Share Posted November 24 It's nature-goddess.com and the password is Sophia-Awake21. The first two sections are horizontal scroll with images. I want to keep the navigation sticky throughout the horizontal scroll only. Is this possible? Link to comment
tuanphan Posted November 26 Share Posted November 26 On 11/25/2023 at 6:44 AM, SunHouse said: It's nature-goddess.com and the password is Sophia-Awake21. The first two sections are horizontal scroll with images. I want to keep the navigation sticky throughout the horizontal scroll only. Is this possible? You can add this code to Website Tools (under Not Linked) > Custom CSS body.homepage header#header { position: sticky !important; position: -webkit-sticky !important; } 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
SunHouse Posted Tuesday at 08:51 PM Share Posted Tuesday at 08:51 PM On 11/26/2023 at 12:02 AM, tuanphan said: You can add this code to Website Tools (under Not Linked) > Custom CSS body.homepage header#header { position: sticky !important; position: -webkit-sticky !important; } Thank you for taking the time to respond tuanphan. I tried the code, but it made the header sticky on the entire homepage. If possible, I want the header to be sticky only on the first three sections of the homepage (which are horizontal scrolling) and then to disappear for the rest of the sections on the page. 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