Hi Guys, Looking into hosting some ads, I am using the official ad plugin which is great in that it allows you to add assets to various points on the site. However talking to ad agency and it seems to get the best ad visibility on mobile, which most of my traffic is, is by using sticky ads either in the header or footer. The issue is of course that a sticky ad along the footer will overlay important buttons and impact UX which is a no-no. Is there a day to pad the bottom of the site up the heights of a banner, so that the sticky banner wouldn’t impact important UX elements? I don’t want users to have to close the banner ad before they can reply or use the post count to scroll down a thread. Also with the sticky header on Discourse, will that be impacted by a sticky banner or could the banner sit above the discourse navbar? Or is this something the ad agency should be able to solve with their ad tech? Thanks, Shane

It works but the top banner makes the composer smaller. It probably better to hide banner when the composer is open. There is a class .composer-open what you can target here to hide the banner when the composer is open. Mobile / CSS body { --banner-height: 40px; // Header .d-header-wrap { top: var(--banner-height); transition: top 0.25s ease-in; .composer-open & { top: 0; } } // Top banner .above-site-header-outlet.top-banner { @include sticky; top: 0; width: 100%; height: var(--banner-height); transition: height 0.25s ease-in; z-index: z("header"); .test-top-banner { width: 100%; height: var(--banner-height); background: red; transition: height 0.25s ease-in; .composer-open & { height: 0; } } .composer-open & { height: 0; } } // Bottom banner .below-footer-outlet.bottom-banner { @include sticky; bottom: env(safe-area-inset-bottom); width: 100%; height: var(--banner-height); z-index: z("header"); .test-bottom-banner { width: 100%; height: var(--banner-height); background: red; } } // Move topic progress wrapper the top of the bottom banner #topic-progress-wrapper:not(.docked) { margin-bottom: var(--banner-height); .composer-open & { margin-bottom: 0; } } // Add banner height to composer max height calculation &:not(.ios-safari-composer-hacks) #reply-control.open { max-height: calc(100vh - var(--header-offset) + var(--banner-height)); } } Edit: I made some correction on the code.

I’m thinking I can add possibly add some padding to the bottom of the body so that the sticky footer ad banner would not overlay the reply buttons and then on the reply-control box that popups up I might be able to set a z-index so that it comes up over the banner ad? Just wondering if anyone has successfully implemented sticky header and/or footer banner ads on mobile without impacting user experience.

Hello :wave: It’s possible but it depends lot of thing. Can you share your site url? I would use plugin outlet and put the banner inside. Set the plugin-outlet height equal with banner height, it will add the necessary spaces. Something like this. Note: This is just a quick example, I hope it will add some idea for you to achieve it. We can do more if you share more info and your site url to check this etc… :slightly_smiling_face: Mobile / Header Mobile / CSS body { --banner-height: 40px; .d-header-wrap { top: var(--banner-height); } .above-site-header-outlet.top-banner { @include sticky; top: 0; width: 100%; height: var(--banner-height); z-index: z("header"); .test-top-banner { width: 100%; height: var(--banner-height); background: red; } } .below-footer-outlet.bottom-banner { @include sticky; bottom: env(safe-area-inset-bottom); width: 100%; height: var(--banner-height); z-index: z("header"); .test-bottom-banner { width: 100%; height: var(--banner-height); background: red; } } #topic-progress-wrapper:not(.docked) { margin-bottom: var(--banner-height); } }

Hi @Don - thanks for getting back, I was thinking something like that might be required alright.

Hi @Don How would that implementation work when you try to reply on mobile?

Ah man, thanks a million for this help - brilliant stuff!

Hey @Don - i have a test of that working great on the mobile, just adding it to desktop and it looks like it should work but there’s a slight issue when you hit reply, unlike on the mobile where the stick area disappears, on desktop it stays in place, is there a CSS hook for the composer opening on desktop?

Hi @Don - any idea how to close the footer when on desktop, the mobile version works great but i can’t seem to figure out how to remove the stick element when you open the reply box on the desktop by hitting reply, it’s CSS beyond my skill level. Thanks

Hello @Shaneod :wave: Sorry for the delay. The code I write above is placed in the mobile section so it only works on mobile. I changed the code to fits on desktop too. You have to place this in common section and remove the existing one from mobile. Here is the updated which works on desktop and mobile too. Common / Header Common / CSS body { --banner-height: 40px; } .d-header-wrap { top: var(--banner-height); transition: top 0.25s ease-in; .composer-open & { top: 0; } } .sidebar-wrapper { html:not(.composer-open) & { height: calc(var(--composer-vh, var(--1dvh)) * 100 - var(--header-offset, 0px) - var(--banner-height)); } } .above-site-header-outlet.top-banner { @include sticky; top: 0; width: 100%; height: var(--banner-height); transition: height 0.25s ease-in; z-index: z("header"); .test-top-banner { width: 100%; height: var(--banner-height); background: red; } .composer-open & { height: 0; } } .below-footer-outlet.bottom-banner { @include sticky; bottom: env(safe-area-inset-bottom); width: 100%; html:not(.composer-open) & { height: var(--banner-height); } z-index: z("composer", "content") - 1; .test-bottom-banner { width: 100%; height: var(--banner-height); background: red; } } #topic-progress-wrapper:not(.docked) { margin-bottom: var(--banner-height); .composer-open & { margin-bottom: 0; } } body:not(.ios-safari-composer-hacks) #reply-control.open { max-height: calc(100vh - var(--header-offset) + var(--banner-height)); }

Can google ads be shown in these areas? @Don

Thanks @Don much appreciated buddy! :+1:

Adding a sticky header & footer

Development

Shaneod (Shane) September 16, 2023, 7:57am 12

Thanks @Don much appreciated buddy!

Topic		Replies	Views
Adding sticky header/footer banners UX advertising	0	156	July 27, 2023
How can i show a floating sticky 300x250 Adsense Ad on right side bar of topic page above the fold? Product Support	14	3246	September 12, 2020
Sticky global notice Feature	4	1826	January 18, 2022
Catfish banner box for adsense on footer Product Support	0	630	April 26, 2021
PAID: Sidebar Creation Marketplace	3	1984	October 30, 2015

Adding a sticky header & footer

Related topics