Skip to main content
Answered

Why is my inline banner overlapping my site's content?

  • November 12, 2020
  • 6 replies
  • 973 views

Forum|alt.badge.img

I've created an inline banner, which should be placed above my site's content, but it's overlapping it. How do I fix this?

Best answer by Eric Fitz

If you have fixed elements on your website, this behaviour is expected when using inline banners. There is a way to resolve this, but it would require you to change some HTML/CSS on your website.

 

Inline banners adds position: relative and margin-top: 48px (height of banner) to the body of the page.

 

If you have a navbar on your website that uses position:fixed top: 0, then your navbar will always be on the top and when you set an inline banner live. The banner won’t be able to “push” the navbar down as it would normally do, resulting in it overlaying the navbar.

 

If you are able to make this minor changes to your CSS, that will ensure the inline banner doesn’t overlay your navbar:

replace top: 0 with margin-top: 0

or

use position:absolute instead to position the navigation bar inside the body.

 

Alternatively, you can also use floating banners, or position the banner to the bottom of the page if the above solution doesn’t work for you.

View original
Did this topic help you find an answer to your question?

6 replies

Eric Fitz
Employee
Forum|alt.badge.img+5
  • Employee
  • 1630 replies
  • Answer
  • November 12, 2020

If you have fixed elements on your website, this behaviour is expected when using inline banners. There is a way to resolve this, but it would require you to change some HTML/CSS on your website.

 

Inline banners adds position: relative and margin-top: 48px (height of banner) to the body of the page.

 

If you have a navbar on your website that uses position:fixed top: 0, then your navbar will always be on the top and when you set an inline banner live. The banner won’t be able to “push” the navbar down as it would normally do, resulting in it overlaying the navbar.

 

If you are able to make this minor changes to your CSS, that will ensure the inline banner doesn’t overlay your navbar:

replace top: 0 with margin-top: 0

or

use position:absolute instead to position the navigation bar inside the body.

 

Alternatively, you can also use floating banners, or position the banner to the bottom of the page if the above solution doesn’t work for you.


  • New Participant
  • 2 replies
  • May 3, 2021

Hi Eric,

 

Would it be possible for you all to put a class on the body, too? That way, those of us with fixed top nav can use that class to adjust our CSS appropriately based on the appearance (and removal) of a banner.


Eric Fitz
Employee
Forum|alt.badge.img+5
  • Employee
  • 1630 replies
  • May 4, 2021

Hey @seth b​, l'm going to tag in our @Product Wishlist​ group here to record your feature request. Hopefully this may feature on our roadmap some day!


  • New Participant
  • 2 replies
  • May 4, 2021

Thanks. Otherwise, we have to use some super-finicky CSS selectors based on your inline CSS to get this work correctly.


TJ B12
Forum|alt.badge.img+1
  • Active User
  • 11 replies
  • March 15, 2022

Was there anything done to help make it easier to adjust the placement of the inline banner? It's loading over the content of our app as well, and wondering if there might be a simple adjustment that can be suggested/recommended?


Hi Intercom. I would like to be able to specify a container in our app that we can drop Intercom banners into - as the current options don’t work for us.

Something like this: 

 


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings