Leaderboard Ad - Display before main menu

Hi there,

Provide a mockup image of how you want it to be laid out? So we can have a good idea of what hook to use and what CSS writeup approach for it. :D

Hi Elvin,

I'm hoping to add it above the Main Menu either centered or aligned with the Main menu below. It should be visible only for desktop.

thank you

I see,

In that case I think the best hook to use is generate_inside_navigation.

And then wrap the leaderboard ad w/ a

<div class="leaderboard-ad-wrapper">
/your ad code here
</div>

.leaderboard-ad-wrapper {
width: 100%;
text-align: center;
}

Hi Elvin,

I have slightly modified your css to:

.leaderboard-ad-wrapper {

	     height: 91px;
	     max-width: 729px
		   text-align: center;
	     width: 100%;
}

With the fixed size I'm trying to stop CLS. Which works but only until the banner loads and then the logo shifts and decreases in size. I can see the same result also with your original code.

Any thoughts?

thank you

Is the ad still active? I've tried checking the page but I don't see the element anymore.

Can you keep it active and let us check? :D

Hi Elvin,

No the ad is offline, we cannot go live like that. Did you see the video?

Any thoughts?

Yes I saw it but it's quite difficult to diagnose things with a video as we can't observe how the site loads its assets.

Any chance you can set up a staging site clone? and can you try hooking the same hook but with an image placeholder instead of the ad?

Hi Elvin,

Good idea. I'll try the image now and let you know. I will create an image with the 728 x 90 px size and hook it instead of image.

thank you

Elvin, same thing. It still pushes the logo and shrinks it. The only difference now is that the the logo does not jump and is static on the page refresh.

Anything else I can try?

I'd try assigning a fixed with to the site logo's container as well and see if it still gets pushed.

.site-logo {
    width: 250px !important;
    height: auto;
}

There is some progress. I got the desired output while using fixed image:

.leaderboard-ad-wrapper {
width: 100%;
text-align: center;
}

.site-logo {
    width: 430px !important;
    height: auto;
}

Not sure why I had to increase the logo width beyond the 430px even when the logo size is 250px?! Using 250px the logo was still small.

However, this did not work with the actual ad. What I did was to use:

.leaderboard-ad-wrapper {
width: 728px;
height: 90px;
text-align: center;
}

.site-logo {
    width: 430px !important;
    height: auto;
}

I had to set fix size to 728px x 90px otherwise the last menu item on the right and the search icon would jump down and align with the first menu item.

This seem to be ok however I'm unable to center the ad since the text-align: center; does not make any effect.

any thoughts?

If you add this CSS:

.leaderboard-ad-wrapper > * {
width: 100%;
object-fit: scale-down;
}

Would you still need it to be centered?

No effect. However what I did was:

.leaderboard-ad-wrapper {
width: 929px;
height: 90px;
text-align: center;
}

.site-logo {
    width: 480px !important;
    height: auto;
}

I had to increase the width for both above. Seems to be working. Not sure if this is the correct approach.

How would I set both CSS and hook to display only on desktop now?

I had to increase the width for both above. Seems to be working. Not sure if this is the correct approach.

That's fine. That's actually a trick users do to prevent CSS. It's basically "reserving" a space for an element to expand on when it loads to prevent the elements around it from shifting.