How do you create a "floating" sidebar banner for a HubSpot blog?

SOLVE
Highlighted
New Contributor

I was wondering how I can alter the sidebar banner on my actual individual blog pages?

 

Right now, we have some blogs that are too short compared to our banner, and it leaves a massive white blank space at the bottom of our page next to the banner when you scroll down. (see attached image)

 

I want the sidebar element to be fixed as you scroll to a certain point of the page - what is the CSS code I need to use?

 

 

Thanks for your help.Blog Side BannerBlog Side Banner

0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Regular Advisor | Partner

The CSS to use would be

.banner-class {
    position: sticky;
}

But be aware that position sticky is not supported in IE/Edge or Android's default browser. If you need more support you'll need to use javascript.

Stefen Phelps, Community Champion, Kelp Web Developer

View solution in original post

0 Upvotes
2 Replies 2
Highlighted
Solution
Regular Advisor | Partner

The CSS to use would be

.banner-class {
    position: sticky;
}

But be aware that position sticky is not supported in IE/Edge or Android's default browser. If you need more support you'll need to use javascript.

Stefen Phelps, Community Champion, Kelp Web Developer

View solution in original post

0 Upvotes
Highlighted
Occasional Contributor

It doesn't work for me... 😞

 

0 Upvotes