kaydotjpg Posted April 11, 2023 Share Posted April 11, 2023 Hi! I was wondering if anyone knows how to replicate a header like the one in this site has? https://a-realm.squarespace.com/?password=pearler Link to comment
Ziggy Posted April 12, 2023 Share Posted April 12, 2023 Looks like they have a simple fixed header and are applying a background and border to this selector: .header-title-nav-wrapper Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
kaydotjpg Posted April 12, 2023 Author Share Posted April 12, 2023 @Ziggy okay- thank you! Do you think you could help me with the code? Adding the background, color, and border options? I'm new to css! ❤️ Link to comment
Solution Ziggy Posted April 12, 2023 Solution Share Posted April 12, 2023 Something like this as a start: .header-title-nav-wrapper { background-color:red; border:1px solid green; } Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
kaydotjpg Posted April 12, 2023 Author Share Posted April 12, 2023 Thanks @Ziggy This is looking great so far. Question- is there a while to manipulate the width of the border? For example I would love to extend it a little longer if possible! The website I'm currently working: https://accordion-fish-2rkl.squarespace.com/ password: yellow Link to comment
kaydotjpg Posted April 12, 2023 Author Share Posted April 12, 2023 @Ziggy actually- i figured it out using: .header .header-announcement-bar-wrapper { position: relative; z-index: 2; width: 150%; box-sizing: border-box; padding-top: 3vw; padding-bottom: 3vw; padding-left: 3vw; padding-right: 18vw; pointer-events: auto; } Ziggy 1 Link to comment
Ziggy Posted April 13, 2023 Share Posted April 13, 2023 7 hours ago, kaydotjpg said: @Ziggy actually- i figured it out using: Nice one! Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? 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