davidgII Posted March 10, 2021 Share Posted March 10, 2021 Site URL: https://qrm-inc.com I'm new to squarespace, and I'm trying to have a "Careers" link button on my homepage in the top right of the header for aesthetic reasons, but I don't want this button to appear on the header for other pages. I figure this would involve either a CSS that assigns a custom header or one that hides this element on the header of other pages. Is this possible and does anyone have suggestions? Beyondspace 1 Link to comment
Beyondspace Posted March 10, 2021 Share Posted March 10, 2021 1 hour ago, davidgII said: Site URL: https://qrm-inc.com I'm new to squarespace, and I'm trying to have a "Careers" link button on my homepage in the top right of the header for aesthetic reasons, but I don't want this button to appear on the header for other pages. I figure this would involve either a CSS that assigns a custom header or one that hides this element on the header of other pages. Is this possible and does anyone have suggestions? try body:not(.homepage) .header-actions-action, body:not(.homepage) .header-menu-cta { display: none; } davidgII 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
EdwardBell Posted March 11, 2021 Share Posted March 11, 2021 Hey I'm looking to do this but in the opposite sense: I want to hide the CTA button in the header on only ONE page. Is there a way to do that? 🙂 Beyondspace 1 Link to comment
Beyondspace Posted March 11, 2021 Share Posted March 11, 2021 2 hours ago, WordsByHermes said: Hey I'm looking to do this but in the opposite sense: I want to hide the CTA button in the header on only ONE page. Is there a way to do that? 🙂 Find the page id using this Chrome Web Store - Extensions (google.com) and replace with collection-id-placeholder collection-id-placeholer .header-actions-action, collection-id-placeholer .header-menu-cta { display: none; } EdwardBell and tuanphan 2 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
EdwardBell Posted March 11, 2021 Share Posted March 11, 2021 Hey, Thanks for the code. I think I must be doing it wrong because when I put it into the 'header' inject code for the page, it's not working. It just shows up as text. (see attached photos for reference) Any suggestions? Beyondspace 1 Link to comment
Beyondspace Posted March 13, 2021 Share Posted March 13, 2021 On 3/11/2021 at 8:13 PM, WordsByHermes said: Hey, Thanks for the code. I think I must be doing it wrong because when I put it into the 'header' inject code for the page, it's not working. It just shows up as text. (see attached photos for reference) Any suggestions? Add the code Design->Custom css Or wrap it inside style tag like so and replace in your screenshot <style> the-code-here </style> tuanphan 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
davidgII Posted March 19, 2021 Author Share Posted March 19, 2021 On 3/10/2021 at 5:40 PM, bangank36 said: try body:not(.homepage) .header-actions-action, body:not(.homepage) .header-menu-cta { display: none; } This worked like a charm. Thanks friend. Beyondspace 1 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