WP SITES

2966

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Adding Shrink Title Effect In Genesis Header

This tutorial shows you how to shrink your site title in your themes header using a tiny bit of jQuery.

It also provides a download of a modified version of the Genesis Sample child theme which includes the code already installed.

Here’s the screencast which shows you exactly what the code does.

Theme With Shrink Title Effect

Here’s the genesis child theme which already includes the code installed:

Register for full access

Related Tutorials

Reader Interactions

Comments

  2. Brad,

    Thanks for the tutorial. Do you know how to remove this script on a mobile device or certain media query ?

    -Chris

    Reply

    • You can wrap the CSS which starts on line 1217 in a media query so it doesn’t shrink when on smaller screens like this

      @media only screen and (min-width: 1200px) {
//shrink CSS rules
}

      or you can modify the jQuery so it only adds the class on larger screen widths.

      This code only executes when the screen width is less than 1023 pixels width.

      if ($(window).width() < 1023 ) {
// Your code
}

Or you can change the comparison operator > to greater than a specific pixel width. This code only executes when the screen width is greater than 1023 pixels width.

if ($(window).width() > 1023 ) {
// Your code
}

      Let me know if you get stuck.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *