This is what I use for a fixed bar at the top of the page for links, a logo, or something else. I wrote the code and worked on it until I got it right. The words are from one of my web pages so I can remember how to do it.
Using a fixed background and links at the top of the page. The logo stays at the top of the page and the links stay at the top of the page. If the page scrolls up the page contents scroll under the header.
The CSS code for a fixed page header.
Use a background picture for the fixed page header that is about the height of the bar that you want at the top. The background-size:contain; will let the background picture grow or get smaller if the text size of the page is made bigger or smaller.
The HTML code that has the fixed_header class has to be at the bottom of the HTML code, before the </BODY> tag, or instead of scrolling under the page header the page will scroll over the page header. It used to, but now I don't know, put the fixed header at the bottom of the <BODY> to be sure.
The background-color and background-image you can make what you need. Take the <H1> tag off and use a table.