How to turn a sticky banner into a floating one

Developer Support CMS Development
1

Hey all,

Bit of a weird question. I’ve been trying to create a sticky banner (top of screen) and wanted to know if there was any way to make it look like a floating banner instead? For further clarity, I would like it to not span the entire width of the screen and have a floaty look & feel. Is this something that’s technically possible to achieve, and if so, how can it be done?

2

A sticky banner typically spans the full width of the screen and hugs the top, but if you’re going for more of a floating banner feel — think something like a notification box or announcement bar that stays fixed in position but doesn’t stretch edge-to-edge — you’re totally in luck. Yes, it’s technically very doable in HubSpot with a little custom styling!

Here’s how you can do it:

Step-by-Step to Turn a Sticky Banner into a Floating One:

  1. Use position: fixed, but limit the width:

.floating-banner { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: 80%; /* or 400px, depending on your desired look */ max-width: 600px; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 16px; border-radius: 8px; z-index: 9999; }

  1. Add this class to your custom module or banner element inside a HubSpot theme or drag-and-drop area. If you’re using HubSpot’s Design Tools, you can pop this into a CSS file or inline style section.

  2. Optional flair:

    • Add a subtle animation (fade-in, slide-down) for that “floaty” effect.
    • Use a semi-transparent background if you’re placing it over an image/video hero.

Let me know if this helps, or if you have any other questions!

:check_mark: Was I able to help answer your question? Help the community by marking it as a solution.

200×200 7.52 KB
Brandon Woodruff
Senior Software Developer @ PearagonStill have questions? Reach out at brandon@pearagon.com

3

Hey @BrandonWoodruff , thank you! I’ll give it a go now and see how it turns out. I might pop you some follow-ups though if you don’t terribly mind.

4

Please do!
Let me know, and if you found my answer helpful, mark it as a solution so others can find it!

5

Hey Brandon,
Ur solution is not working for me, could you please walk me through the steps in more detail? that would be great, thank you so much!

6

Hi @EyadElkhatib,

Would you mind sharing the page URL?