Header on mobile screens


How can i make my header use the whole mobile screen. So i only see the header image and the white text. And when i scroll i see the gray row with the time icon.

(sorry for my bad english)


Best 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

      if( $('.header-image').length ) {
        var headerImg = $('.header-image').find('.large-header').attr('src');
        console.log('Header image: '+ headerImg);

          'background-size': 'cover',
          'background-repeat': 'no-repeat',
          'background-position': 'center center',
          'background-image': 'url('+headerImg+')',
          'overflow': 'hidden',

        var wHeight = $(window).height();
        var headerHeight = $('.site-header').height();
        var heroHeightMobile = wHeight-headerHeight;


        if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {


  1. Update
  2. Add the below CSS code to Appearance > Customize > Additional CSS from dashboard.
    .header-image.apply-bg-image img {
      display: none;