• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

  • Disable jQuery Script On A Mobile Device
  • Change Logo On Scroll
  • Display Logo on Scroll
  • Eliminate The Altitude Pro Header Shrink On Scroll

jQuery Scroll

Reader Interactions

Comments

  1. Christopher Richmond says

    March 25, 2017 at 6:42 pm

    That was perfect! Thank you so much.

    Log in to Reply
  2. Christopher Richmond says

    March 24, 2017 at 9:21 am

    Brad,

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

    -Chris

    Log in to Reply
    • Brad Dalton says

      March 24, 2017 at 10:34 pm

      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.

      Log in to Reply
    • Brad Dalton says

      March 25, 2017 at 8:24 am

      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/

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags