Banners on top of post page

Hello @incakola100,

What kind of banner do you want to insert? I mean, is it pure HTML, something like image with certain link?

Kind Regards, Roman.

@romanbon it should be an image that links to a website.

Okay @incakola100,

Can you please provide some explanatory screenshots in order to illustrate how it should look?

You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online screenshot services.

Kind Regards, Roman.

So I would like something like this

but on the post page between the menu and the first post.

Thanks in advance @romanbon

Hello @incakola100,

Well, I don’t think that there is an easy way to do this, it looks like this task requires some coding and testing on different screen resolutions. This goes beyond our support policy, it’s considered advanced customization. You might want to hire someone for this service.

Kind Regards, Roman.

P. S.
As a workaround, you can upload the banner as logo and use the following CSS code in order to remove padding.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

header#masthead,
nav#main-navigation {
    padding-top: 0;
}

However, although it will look like your screenshots, it will link to the homepage and will be always on top of the menu.

P. P. S.
It looks like there is a relatively easy way to change banner link and move it below menu in single posts! ??

You can try to do this with jQuery.

1. Please install and activate Insert Headers and Footers plugin that will allow you to insert JavaScript (jQuery) code.

2. Go to your Dashboard → Settings → Insert Headers and Footers → add the following code to Scripts in Header section, and click Save button:

<script type='text/javascript'>
    jQuery(document).ready(function(){
        jQuery('header#masthead div.site-branding > a').attr('href', 'https://example.com');
        jQuery('body.single-post nav#main-navigation').after(jQuery('body.single-post div.site-branding'));
    });
</script>

You can replace https://example.com with any other link.

Kind Regards, Roman.

• This reply was modified 8 years, 3 months ago by Roman Bondar.