0

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 ?

Improve this question
3
  • Do you have any experience with JQuery/JavaScript? How committed are you to the theme 2014, because I know you could probably find other free themes that would do the same thing for you without having to recode. It's not going to be something that you'll be able to do with CSS alone because you need some code that says when you scroll away from the top, resize the header to be smaller, then some more code to return it to it's original size when returning back to the top.
    – Brent
    Commented Nov 29, 2017 at 15:47
  • Thank you for your answer. Yes, I know it's not possible to make the changes just with CSS. But unfortunately I don't have any experience with JQuery/JavaScript. But I think I can implement the changes if I have some instructions.
    – pradhana
    Commented Nov 29, 2017 at 15:50
  • I like the theme 2014 a lot, it's doing a great job and I want to keep it. It's just the header I want to change.
    – pradhana
    Commented Nov 29, 2017 at 15:57

1 Answer 1

Reset to default
0

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!

Improve this answer
4
  • Thank you, Brent, for answering. I have already a child theme. As far as I understood I have to create a javascript file first. But honestly I even don't know how to create such a file. I checked the google results after entering "jquery to resize header logo on scroll down". I hardly understand, guessing I am not experienced enough. :(
    – pradhana
    Commented Nov 29, 2017 at 17:50
  • You may feel that you are lacking in experience, but don't let that overwhelm you! Often times when I'm learning something new I have to re-read something two or three times before I get it. (I'm pretty slow ;)) Sometimes you just got to jump in and get lost for a little while. Here's two more bits of advice. To link a Javascript file to your theme, use the wp_enqueue_script() function. codex.wordpress.org/Plugin_API/Action_Reference/…
    – Brent
    Commented Nov 29, 2017 at 21:56
  • Then once you've got the js file linked, start experimenting with Jquery or javascript. I like Jquery because it's alot like CSS only it's dynamic. That is if you know how to work with CSS, you can learn Jquery easier than you can JavaScript. Good luck, Pradhana! Don't give up!
    – Brent
    Commented Nov 29, 2017 at 21:57
  • Thank you, Brent, for the encouragement. That's really kind of you! :) I tried again the go deeper into the subject, but it would take too much time for me to fix the problem. It's too frustrating. You know, I am a writer, not a web developer. Most probably it's better to ask someone who is a professional and who can give me either direct instructions or who can fix the problem for me. Thank you, Brent!
    – pradhana
    Commented Nov 30, 2017 at 17:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.