[Support request] Add padding on top of navigation

Home Forums Support [Support request] Add padding on top of navigation

Home Forums Support Add padding on top of navigation

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2173065
    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.

    #2173072
    Fernando
    Customer Support

    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. 🙂

    #2173091
    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.

    #2173111
    Fernando
    Customer Support

    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. 🙂

    #2173127
    Nicole

    Yes, that is the div

    and this is the CSS I have:

    #AdThrive_Header_1_desktop {
    min-height: 250px;
    }

    Is something missing?

    #2173157
    Fernando
    Customer Support

    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. 🙂

    #2173332
    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?

    #2174109
    Fernando
    Customer Support

    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. 🙂

    #2175143
    Nicole

    Thanks very much!

    #2176901
    Fernando
    Customer Support

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.