I think I am getting closer. I changed it to read:
.site-header {
position: fixed;
width: 100%;
}
This does make the fixed header stretch across the top again. The only problem now is that the text is scrolling over the top of the header. Really weird!! I have to find some way to both move the text below the header. In progress on my guessing until someone helps me out! He, he, he.
What’s happening is that setting position: fixed on an element removes that element from the document flow, meaning that the browser no longer accounts for the space taken up by that element when determining how to layout the page. So that’s why you get the text scrolling over the header. For this layout to work you generally need to “fake it” by setting z-index on the header and giving the content area some top padding to push it all beneath the header. So try something like this:
#masthead {
position: fixed;
width: 100%;
z-index: 10;
}
.site-main {
position: relative;
padding-top: 400px;
}
As a side note, you should not be editing theme files directly, as you will lose all these changes if the theme ever gets updated, to add new features or fix bugs or patch security issues. Any changes should be made in a child theme or using a custom CSS plugin.
Thank you, stephencottontail! With that simple explanation, now I understand how to make any fixed element. Your answer was very helpful
