WP SITES

3095 Coded Tutorials & 297 Plugins

Adding Shrink Title Effect In Genesis Header

—

by

Brad Dalton

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 to code & support

Related Tutorials

Was this helpful?

Yes
No
Thanks for your feedback!

4 responses to “Adding Shrink Title Effect In Genesis Header”

  1. Christopher Richmond Avatar
    Christopher Richmond

    That was perfect! Thank you so much.

  2. Christopher Richmond Avatar
    Christopher Richmond

    Brad,

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

    -Chris

    1. Brad Dalton Avatar
      Brad Dalton

      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
      [code]
      @media only screen and (min-width: 1200px) {
      //shrink CSS rules
      }
      [/code]

      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.

      [code]
      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
      }
      [/code]

      Let me know if you get stuck.

    2. Brad Dalton Avatar
      Brad Dalton

      Also see here for a full solution https://wpsites.net/web-design/how-to-remove-jquery-script-on-a-mobile-device-or-specific-screen-width/

Leave a Reply