Mobile: Page titles on Cusom JavaScript Headers on mobile not working

Hi There,

I wanted to create custom headers and page titles on each page of my website, which I did thanks so a helpful past topic that Kharis provided custom JavaScript for. It worked perfectly for web, but the page titles do not show on the mobile pages. Here is the code I used from Kharis using the JavaScript plugin:

    (function($){  
      
        $.fn.extend({  
            textToHeaderImage: function(options) {     
                var defaults = {
                    maintitle: '',
                    subtitle: ''
                };

                var options = $.extend(defaults, options); 

                var subtitle = function(){
                  if( options.subtitle != undefined ) {
                    return '<p class="subtitle">'+options.subtitle+'</p>';
                  }
                }
                
                var headerText = '<div class="header-text">'+
                                 '<div class="header-text-inner">'+
                                 '<h2 class="maintitle">'+options.maintitle+'</h2>'+
                                 subtitle()+
                                 '</div>'+
                                 '</div>';
                var headerImg = this.find('.header-image');                 

                if( headerImg.length ) {
                  headerImg.append(headerText);
                }

            }
        }); // Function ends 

        /* Insert header text definition here */    

    $('.page-id-207').textToHeaderImage({
      'maintitle': 'FAQs'
    });

    $('.page-id-200').textToHeaderImage({
      'maintitle': 'Solutions'
    });

    $('.page-id-198').textToHeaderImage({
      'maintitle': 'About Me'
    });

    $('.page-id-202').textToHeaderImage({
      'maintitle': 'Price Plans'
    });
      
      $('.page-id-216').textToHeaderImage({
      'maintitle': 'Get In Touch'
    });
      
      $('.page-id-536').textToHeaderImage({
      'maintitle': 'Long-Term Pricing'
    });
        
         
    })(jQuery);

The URL is: www.esteemedassist-salma.com

Many thanks for your help in advance

Best,
Mel

Hello Mel,

Please check your pages’ IDs and ensure they match with the numbers you specifid in these lines of code:

    $('.page-id-207').textToHeaderImage({
      'maintitle': 'FAQs'
    });

    $('.page-id-200').textToHeaderImage({
      'maintitle': 'Solutions'
    });

    $('.page-id-198').textToHeaderImage({
      'maintitle': 'About Me'
    });

    $('.page-id-202').textToHeaderImage({
      'maintitle': 'Price Plans'
    });
      
    $('.page-id-216').textToHeaderImage({
      'maintitle': 'Get In Touch'
    });
      
    $('.page-id-536').textToHeaderImage({
      'maintitle': 'Long-Term Pricing'
    });

To help me check those pages, please provide me their links here.

Regards,
Kharis
aThemes Support

Hi Kharis,

Thank you for this. I have checked everything is correct on my side :frowning: this is the links that are not working on mobile version with the title):

https://esteemedassist-salma.com/about-me
https://esteemedassist-salma.com/price-plans
https://esteemedassist-salma.com/solutions
https://esteemedassist-salma.com/faqs
https://esteemedassist-salma.com/get-in-touch

Your help is greatly appreciated :slight_smile:

Best,
Mel

Hello Mel,

It looks like it is an issue with CSS code you applied in the Additional CSS.

    .header-text-inner h2.maintitle {
        color: 
        #fff;
        display: inline-block;
        font-size: 45px;
        line-height: 500px;
        font-weight: 700;
    }

line-height: 500px; hides the text as header image area on smaller screen is less than 500px. To avoid this issue, try adding this CSS code:

    @media only screen and (max-width: 700px) {
      .header-text-inner h2.maintitle {
        line-height: auto;
      }
    }

Regards,
Kharis
aThemes Support