Title: Mobile Header Content
Last modified: September 1, 2016

---

# Mobile Header Content

 *  [jonluciano](https://wordpress.org/support/users/jonluciano/)
 * (@jonluciano)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/mobile-header-content/)
 * Is there a way to shrink the size of the content in the header (site title) so
   it doesn’t wrap in mobile view?
 * Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [avazquez1](https://wordpress.org/support/users/avazquez1/)
 * (@avazquez1)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/mobile-header-content/#post-7552916)
 * 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?
 *  Thread Starter [jonluciano](https://wordpress.org/support/users/jonluciano/)
 * (@jonluciano)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/mobile-header-content/#post-7552920)
 * It is mobile responsive. I’m using the Eighties theme. The url is [http://www.shockercup.com](http://www.shockercup.com)
 * Thanks!
 *  [avazquez1](https://wordpress.org/support/users/avazquez1/)
 * (@avazquez1)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/mobile-header-content/#post-7552933)
 * 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.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Mobile Header Content’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/eighties/1.3.0/screenshot.png)
 * Eighties
 * [Support Threads](https://wordpress.org/support/theme/eighties/)
 * [Active Topics](https://wordpress.org/support/theme/eighties/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/eighties/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/eighties/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [avazquez1](https://wordpress.org/support/users/avazquez1/)
 * Last activity: [9 years, 9 months ago](https://wordpress.org/support/topic/mobile-header-content/#post-7552933)
 * Status: not resolved