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.

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.

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!

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

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: