Static Header (Hero) section image

Hello there,

> I figured out how to have just one image in the header.

Great! That you figured it out.

> How to I add text?

Adding some text on the hero image is actually impossible by default as there is no associated option in the customizer. However, we can accomplish it by adding a couple of jQuery code to insert new content block into the hero image markup. Please try doing the steps below:

1. Install and activate the TC Custom JavaScript plugin
2. Go To Appearance > Custom JavaScript
3. Paste the following code into the provided box

(function($){
      
    "use strict"

    var text        = 'The image title goes here.';
    var headerImg   = $('.header-image');
    var headerText  = '<div class="header-image-text">'+
                      '<div class="inner">'+
                      '<h2 class="maintitle">'+text+'</h2>'+
                      '<div>'+
                      '</div>';
                      
    if ( headerImg.is(':visible') ) {
      headerImg.append(headerText);
    }  

})(jQuery);    

4. Update

To style the new element positioning and define text color and size, you need to add the custom CSS code below into your site’s additional CSS (Appearance > Customize > Additional CSS).

.header-image-text{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  text-align: center;
}

.header-image-text .inner{
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}  

.header-image-text .maintitle{
  color: #fff;
  font-size: 57px;
  line-height: 67px;
  font-weight: 700;
}  

You would do an adjustment if only needed.

Regards,
Kharis

> How do I add the text that I want on to the Header image?

Could you please point me to the your page URL where I can see that header image, so I can be more precise?

Regards,
Kharis

Hello Felix,

Could please confirm if the code I suggested previously doesn’t work for you?

Regards,
Kharis

Hello there,

Nothing wrong with the header options. For design purpose, we don’t include that option in Sydney. You might have ever seen it on other theme, but it isn’t a mandatory aspect. As every theme is unique, it has its own features that might not be found on other, including Sydney. However we still have a chance to add some text on the header image by adding a couple of jQuery code. For more advance, some would develop a child theme or writing a plugin.

I hope this clarifies things a bit.

Regards,
Kharis