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> bigpoppapaul and IXStudio 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment