Header on mobile screens


#1

Hi,

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)

https://biketec.nl

Best Regards.


#2

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
    (function($){

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

        $('.header-image').css({
          'background-size': 'cover',
          'background-repeat': 'no-repeat',
          'background-position': 'center center',
          'background-image': 'url('+headerImg+')',
          'overflow': 'hidden',
        }).addClass('apply-bg-image');

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

        $('.header-image').height(wHeight);

        if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
            $('.header-image').height(heroHeightMobile);
        }

      }

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

Regards,
Kharis