Putting Page Title on the Header Image

Is there a way to get the page title on the header image on a page?

I’ve checked through the forum and can’t see a work around on this.

Any help is much appreciated.

Kind regards

Hello there,

To accomplish it, try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    jQuery(function($) {

      var headerImg = $('.header-image');
      var title     = $('.title-post').text();
      var ctaBtn    = '<div class="page-header-content slide-inner"><div class="text-slider">'+
                          '<div class="maintitle">'+title+'</div>'+
                      '</div></div>';

      if ( headerImg.is(':visible') && $('.title-post').length ) {
        headerImg.append(ctaBtn);
      }

    });
  1. Update
  2. Add the below CSS code to Appearance > Customize > Additional CSS from dashboard.
    .page .entry-header {
      display: none;
    }

    .header-image .slide-inner {
      top: 50%;
      -webkit-transform: translateY(-10%);
      -moz-transform: translateY(-10%);
      -ms-transform: translateY(-10%);
      -o-transform: translateY(-10%);
      transform: translateY(-10%);
    }

    .page-header-content .text-slider {
      position: relative;
      -webkit-animation-name: unset;
      animation-name: unset;
    }

    @media only screen and (min-width: 1025px) {

      .header-image .slide-inner{
        top: 70%;
      }

    }

    @media only screen and (min-width: 768px) {

      .page-header-content .text-slider .maintitle {
        font-size: 38px;
      }

    }

Regards,
Kharis

Kharis once again thanks for giving your knowledge here - that’s a great
help!

Simon PorterManaging DirectorT: 0117 214 0251M: 07761 388
422www.varii-promotions.co.uk http://www.varii-promotions.co.uk

Thank you so much for this! It was hugely helpful.

I have a followup question but since it pertains specifically to this fix I wasn’t sure whether to open a new thread or not. Please let me know if I should do so. If not, here’s the issue: the Posts page (ID 254) on my site is now pulling in the titles of all posts, not the actual page title (“Blog”) as you can see here: http://keziav.juliaramsey.me/blog/

Any recommended fixes? CSS doesn’t seem to be effective — I tried .page-id-254 .maintitle {display:none;} but no luck. Can’t tell you how much I’d appreciate the help. Best wishes!

Hello there,

Please try replacing this line of code:

    var headerImg = $('.header-image'); 

with:

    var headerImg = $('.single .header-image, .page .header-image');

Regards,
Kharis