Change style of Twenty Seventeen child theme

Question

I'm looking to change the styling of a child theme based on the Twenty Seventeen WordPress them so that the banner of the front page behaves exactly like the banner on non-front pages.

In other words, I want the banner on the front page to be fixed height and to maintain that height when the page is scrolled up or down, instead of starting out filling the whole page and then reducing in height as the page is scrolled down.

Unfortunately, it's a bit confusing trying to figure out what css controls this. I was looking in Twenty Seventeen's style.css file; there are lots of styling that point to elements with the classes twenty-seventeen-front-page and custom-header-media, and I have tried all kinds of styling of these elements in the child theme, but none seems to achieve the effect I want (in some cases, they make the banner disappear completely).

Can anyone help?

Answer 1

It's probably a combination of css and js. When you scroll down that is detected in Javascript, and then the JS either adds a class to that element, and the css that is written for that extra class gets activated, or the JS adds css inline or animates it with a function like the jQuery animate function.

Try to use inspecting in browser to figure out exactly what is happening, and narrow down the problem.