Twenty Fourteen: Shrinking header while scrolling down

I am using the Twenty Fourteen theme. Normally the header has a heigth of 48 px. I made the logo bigger with the following code:

 .header-main {
    min-height: 108px;
}

That works well so far. Now I would like to shrink the header while scrolling down, in such way that the the header will get a height of 48 px and be fixed. The logo within the header should be replaced by a smaller logo that fits to 48 px height.

Unfortunately I have insufficient experience to implement this function. Can someone help me please ?

Topic theme-twenty-fourteen logo headers css Wordpress

Category Web

1
answered at

Ok, Pradhana. This is going to be around about solution to your question, but the first thing that I believe that you would need to do is create a child theme. Go over to WordPress.org and do a little studying on how to create a child theme.

Then you'll have to add a javascript file that is referenced from the functions.php file in the child theme. Once you get to this point, then you can start experimenting with Jquery to adjust the height of your logo. I would do a specific search on using Jquery to adjust the height of your logo.

I just googled "jquery to resize header logo on scroll down." and got a nice list of options. Those jquery solutions is would go in the Javascript file that you add to your child theme. This should get you off into the right direction. Good luck!

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.