Mobile Header Content

Hi,

Without knowing too many details, I suspect that your template is mobile responsive which would cause behavior like that. What theme are you using? Also, what is the link to your site?

Your theme should have a JS folder. In that folder there is a header folder. I was able to find the following:

/!function($) {
$(“#masthead”).backstretch($(“#masthead .screen-reader-text”).data(“backstretch”)),
$(“#masthead”).data(“height”, $(“#masthead”).outerHeight()),
$(window).scroll(function() {
if ($(window).width() > 800) {
var position = window.scrollY
, bottom = window.innerHeight – document.getElementById(“colophon”).offsetHeight
, height = $(“#masthead”).data(“height”)
, content = $(“#content”).offset().top
, footer = $(“#colophon”).offset().top – position;
position > 0 && content > position && footer > bottom ? height > position ? ($(“#masthead”).css({
height: height – position + “px”,
overflow: “hidden”
}),
$(“.site-branding”).css({
opacity: 1 – position / height * 2
})) : $(“#masthead”).css({
height: “0px”
}) : 0 >= position && ($(“#masthead”).css({
height: height
}),
$(“.site-branding”).css({
opacity: 1
}))
} else
$(“#masthead”).css({
height: height + “px”
}),
$(“.site-branding”).css({
opacity: 1
})
})
}(jQuery);/

Seems to me the function you’re looking at is controlled by jQuery. Please be advised that this isn’t an area I’m 100% familiar with. However, I think this might be a good starting point to at least have a look at. I’m not sure how familiar you are with jQuery, but I hope this at least points you in the right direction.