Moving layout for banners

When you want to use banner announcements, you might notice the published banner is over some elements in your application. Typically, you have a navigation bar and it is fixed to the top side of the browser.

When the announcement is displayed, we try to move all elements down, but it is not easily possible for fixed elements (position: fixed). To fix this issue, you can use our JS API.

Use JS API

The fix can be pretty straightforward. You must know all elements you want to move (typically the top navbar). Then listen to the banner-spacing event. You will receive a number that you should use to move those elements.

Check the API overview first, before you start using our JS API.

productFruits.api.announcements.listen('banner-spacing', (spacingInfo) => {
	// You will get the spacingInfo which holds the marginTop property
	// Move the fixed element(s) by marginTop
	
	const el = document.getElementById('navbar');
	el.style.top = spacingInfo.marginTop + 'px';
});

This event is triggered whenever banners are displayed or closed.