Edit sticky header html - How to locate corresponding php file

Question

I need to make my sticky header work a bit more smoothly.

Right now, when you scroll down, the sticky header immediately loads which makes the website jump. It´s bumpy and leads to bad user experience.

I want the sticky header to appear exactly at the point where the normal header is out of visibility. In this way, the experience for the user is smooth.

I already found out how to achieve that by editing the following html code within browser dev tool:

<div id="header-wrap" class=" clearfix" data-default-height="50" data-sticky-height="50">

Changing the number 50 to 240 (height of my normal header) makes it work perfectly.

Now, what file in the backend needs to be edited in order to make the html load with these different values?

I only have some very basic php knowledge. How would I be able to locate the corresponding php file? Or maybe altering a .js file is what I need to do? Given I got the file I need, do I just need to change some number 50 in the file to 240?

Answer 1

What you need to know is how templates work in WordPress. Templates are 'instructions' on how to 'build' page output. They are contained in your theme's file structure. (Which is why your question is better asked on the theme's support page, instead of here.)

The actual template file (a PHP file) which is used based on the template hierarchy, explained here: https://developer.wordpress.org/themes/basics/template-hierarchy/ . The entire 'theme developers handbook' is useful if you want to understand how pages are built in WP.

I can't give you an exact answer, as it depends on your theme. And theme questions are not the purpose of this place; the support pages of your theme are the place for that.

But in general, the above link will help you start your understanding of how templates are used to 'build' pages.