Adding Shrink Title Effect In Genesis Header

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