[Support request] Add padding on top of navigation

[Nicole]

I have an ad at the top of the navigation and CSS code to keep it to a minimum height. However, since the code is deferred it still jumps as it only loads after the site loads.
I would like to keep padding above the primary navigation so that that space stays blank even if there isn’t an ad there.
How do I do that?

P.S. padding might not be the correct way to do it. Basically what I want is to move my navigation down so that I have a blank section about it. I need to have space for the ad to load even before it loads.

[Fernando]

Hi Nicole,

You wouldn’t need top-padding.

To reserve a space for your advertisement, you can insert your ad inside a div with a class my-advert. For instance:

<div class="my-advert">
    <!-- you ad script here -->
</div>

See: https://share.getcloudapp.com/JruO4x0W

Then, you may use custom CSS to set a minimum height to the container. For instance, here is a CSS you may try adding to Appearance > Customize > Additional CSS:

.my-advert {
    min-height: 90px;
}

Kindly replace 90px with your ad’s height.

Hope this clarifies. 🙂

[Nicole]

Thanks for your response.

I already have that but it still jumps on a desktop.

When the site opens the navigation is at the top and a second later it jumps 250pixels down which is causing me to fail the core vitals because of the jump.

That’s why I thought of leaving a permanent gap to stop it from jumping.

[Fernando]

I’m not seeing it implemented on your site.

Are you referring to this div?: https://share.getcloudapp.com/ApuJYE28

When your site is loaded, this element is loaded late.

Can you try inserting all of these in the div mentioned earlier? Then add the CSS.

Clear your cache afterwards.

Kindly let us know how it goes. 🙂

[Nicole]

Yes, that is the div

and this is the CSS I have:

#AdThrive_Header_1_desktop {
min-height: 250px;
}

Is something missing?

[Fernando]

I see. To confirm, may we know how specifically you’re adding the advertisement script? Are you adding it through a Hook Element or another way?

It seems that this Div is being added late.

Hope to hear from you soon. 🙂

[Nicole]

I don’t really have control over how the ad is added. It is added by Adthrive. I only have control over the css.

I have enabled a script to defer the javascript (from the ad) which might be causing the delay.

Can’t I just add a blank section where the ad should be unrelated to the ad script?

[Fernando]

That could be one reason.

Kindly reach out to the support of AdThrive as well and see if they have any insights regarding this. Please note that the way your ads are loaded/added through AdThrive plugin may be out of our scope.

Moreover, for your inquiry, as opposed to using AdThrive, you may also add such a section which will hold your ad’s script through a Hook Element. This process should reserve a space on load, contrary to what occurs in your website now.

Kindly refer to my previous message: https://generatepress.com/forums/topic/add-padding-on-top-of-navigation/#post-2173072

See: https://share.getcloudapp.com/JruO4x0W

Also see for reference: https://docs.generatepress.com/article/hooks-element-overview/

Hope this clarifies. 🙂

[Nicole]

Thanks very much!

[Fernando]

You’re welcome Nicole! Feel free to reach out anytime you’ll need assistance with anything else. 🙂

[Author]

Posts