Floating ad partially under the menu

finnoy

I have a sticky menu on the desktop layout. When scrolling down, a floating ad on the right sidebar will partially stay under the menu. I would like it to have a 7rem top margin instead of 80px which is Ezoic's default. Which CSS class should I modify?

MichaelH

finnoy . To change the top margin of the floating ad, you can modify the margin-top property in the CSS code within the provided HTML snippet. Here's the relevant part of the code:

<span class="ezoic-ad ezoic-at-0 banner-2 banner-2137 adtester-container adtester-container-137 ez-sticky" data-ez-name="finnoytravel_com-banner-2" style="top: 80px; min-height: 250px;">
To change the top margin from 80px to 7rem, you can update the top property within this code snippet. Here's the modified code:
<span class="ezoic-ad ezoic-at-0 banner-2 banner-2137 adtester-container adtester-container-137 ez-sticky" data-ez-name="finnoytravel_com-banner-2" style="top: 7rem; min-height: 250px;">
Simply replace top: 80px; with top: 7rem; as shown above. Once this change is made, the ad should have a top margin of 7rem. Make sure to save and publish the changes to your website.

finnoy

Thanks for the reply.

I think the code snippet you posted is Ezoic-generated so I really can't modify it. My ad code is:

<!-- Ezoic - sidebar_floating_1 - sidebar_floating_1 -->
<div id="ezoic-pub-ad-placeholder-137"> </div>
<!-- End Ezoic - sidebar_floating_1 - sidebar_floating_1 -->

And Ezoic replaces the placeholder with the real ad code.

Monica

finnoy Sorry about the confusion there! To modify the top margin you can edit the placeholder. Simply enable the ezoic chrome extension and find the sidebar_floating placeholder, click the name and then edit
< image.png >
Once you've done that head to the style tab and add the margin you'd like to use and click Save Placeholder
< image.png >

You may need to clear your site and browser caches before the changes pull through!

finnoy

Thanks, Monica.

Unfortunately, this is not the best solution. I don't want to increase the top margin but modify the top attribute of the element. They are different. The top attribute has an effect only when the element sticks to the top of the container. The margin affects all the time.

JeanPierre

finnoy I added an image to this message so that it's easier to tell what's going on. You may have to reduce the verticle size of the top navigation bar. This would allow you to keep the sidebar as is. The other option is to use the Ezoic Chrome extension, as shown by Monica, to reduce the types of ads that can fill there. As it stands, the skyscraper ad type is too large for the space given to it due to the size of the navigation bar. These may be the only solutions available in this case.

finnoy

Thank you for your efforts.

I can deselect skyscraper ads but it is not the main problem. The main issue is that the top of the ad is under the navigation bar. Thanks, JeanPierre, for adding the photo.

About the solutions:

Adjusting margin-top: not a good idea because then there will be unnecessarily empty space when scrolled up.
Removing skyscraper ads: does not solve this issue.
But there would be an easy and perfect solution. I just need to override Ezois's CSS rule from top: 80px to top: 7rem. The question is: how could I do it?

Regards
Niko

Monica

finnoy Hi there, I'm going to ask our engineering team to do this for you, they've got a few tasks in their queue but they should get to this in approximately one week. We'll keep you updated along the way!

finnoy

Thank you, Monica. Sounds great! 🙂

Monica

finnoy Hi there, Monica here - we've heard back from the team. They've recommended you add
.ez-sticky {
top: 120px!important;
}

to your CSS file, which will override the sticky sidebar position from your end.

Please let me know if you run into any problems with this 🙂

finnoy

Excellent, it works. Thanks a lot. 🙂