How to correct page header image display in Mobile

Can you try excluding jquery.js from your caching/minifying plugin?

I have removed that said jquery but don't know the reason why you said to remove.

Also tell the CSS to vertical align the navigation menu items.

I asked you to do that as you're getting javascript errors on your site. You still have some errors - are you using a caching/minifying plugin? If so, which one?

You can vertically align your menu by adding some margin on top of it:

@media (min-width: 769px) {
    #site-navigation {
        margin-top: 20px;
    }
}

The css helped Tom.
I am using W3 total cache for caching. Can you please tell where is the error, how did you found that and the solution. I am really glad to have this theme but am also interested in making the best site out of this theme.

Well Tom, I also tried changing plugin from w3 total cache to autoptimize and async javascript as suggested on generatepress. It did removed error showing on 'developer tools' in chrome. However, the page load time has increased in pingdom from 387ms to 1.23 seconds and in GTmetrix from 1.2 seconds to 1.6 seconds.
In page speed insights, a clause is added saying 'reduce server response time. In our test, your server responded in 0.54 seconds'.
What can we do about this?

I'm pretty sure the error was still coming from jQuery being included in the cache/minify script. If jquery.js is ignored and left to be, there shouldn't be any errors.

Not getting anything now in the mind but can see the site is working fast with great figures on all metrics.

That's good, right? :)

Now I am just worried about 'reducing server response time' which is extending to around .7 seconds.

That is likely something that needs to be tweaked on the server side of things.