Turn your basic Squarespace announcement bar into a mini showstopper! Watch as I show you how to customize the size, position, and style of your announcement bar. From curved edges to vibrant colors, this trick will make your announcement bar pop and stand out on your website. Get ready to wow your visitors with this sleek and stylish upgrade! 🚀🎨
Hey there, Becca here from Inside the Square, and welcome back to my channel! In this tutorial, I’ll teach you how to turn your standard Squarespace announcement bar into a mini one.
Now, as always, the codes I’m about to share are listed in the description below, but we have a lot to customize, so I’ll go ahead and share my screen with you to teach you exactly how this code works. Let’s get started!
How to Create a Mini Announcement Bar
Here we are inside Squarespace, and I do want to mention that I’m using version 7.1, but this tutorial will work for older versions of Squarespace as well.
Here’s the code that we’re going to use to create this effect in Squarespace, but first, we need to turn on the announcement bar. To do that, we’ll select:
Website Tools
- Select Announcement Bar
- Enable It
Now, we can click on custom CSS, here I’ll paste the code that’s listed underneath the video, and we’ll make some changes. But immediately, you can see that announcement bar has moved. It’s no longer at the top of the page, it’s right here between my header and the rest of the content on my site. It’s definitely changed in position and in size.
| Position | Description |
|---|---|
| Border Radius | Creates curved edges |
| Position Fixed | Pulls it away from the top of the page |
This first line of code says border-radius, and that creates those curved edges, completely optional and not necessary. You can remove that line of code if you want to, or you can change it dramatically to make it a really rounded announcement bar.
Making Customizations
After that, we’ve set position: fixed. I want you to leave this part of the code alone. That’s what pulls it away from the top of the page so it sits in a different spot. This right here has adjusted the margin. We’ve pulled it away from the top and the side of the screen. Increase this number if you want it to be really scooted into the center there or maybe decrease the number if you want to be closer to the top, and you can also change the position by specific directions.
- Margin 2vw: Changes its direction at the top and the left
I can also say margin-left: 15 VW just as an example here, and that’ll scoot it in and a lot more. So, get really creative with your margins here.
| Customizations | Action |
|---|---|
| Add a Border | Style, choice on my part |
| Add a shadow | Lifted off of the page |
| Change the Background | Modify the color of the background |
Customizing Your Announcement Bar
After that, I’ve added a border, which is just a style choice on my part. You can remove that line completely, or you can change it up, maybe editing the color to something more vibrant like a bright red and changing the border width from one to maybe four, so it really stands out, super customizable again, change that to be the style of your own website or remove it completely. I’ve also added a shadow because I like the way it looks when it’s slightly lifted off of the page, again feel free to remove that part of the code or customize it. And last but not least, I wanted to change the color of the background. I didn’t think it really stood out in that gray color I had assigned in my site styles menu.
So, I went ahead and said background and made it this specific color. Change up this color to anything you want it to be, web-safe color name, hex color code, completely up to you, or remove that line if you want it to stay the original color that it was, however you’ve modified this code, just select save when you’re done and you’ll be good to go.
Underneath this video, you’ll find that example code that I shared with you along with links to additional resources so you can customize it even more.
Thank you so much for watching this tutorial, I truly hope you enjoyed it. If you did, head on over to Inside the Square where you can join my email newsletter so I can send you more tips and tricks about all the cool things you can do with Squarespace.
Thanks again for watching, and most importantly, have fun with your Squarespace website. Bye for now!
Key Takeaways
- Use custom CSS to create a mini Squarespace announcement bar
- Customize the position, size, borders, shadows, and background color
FAQ
- Can I use this code for different versions of Squarespace?
- Yes, this tutorial will work for older versions of Squarespace as well
If you liked this tutorial, then you are going to love my Squarespace CSS cheat sheet. I’ve created a Notion database to hold all of the selectors for everything I want to modify on a Squarespace website. I’ve packed it with pro tips and custom code snippets that you can use to make your Squarespace website uniquely yours. Get access to this game-changing database at Inside the Square CSS.
