How would I alter just the header bar of a page when a user is logged on?

I've set up a login system for my website, where the server authorizes correct login details, then sends a hashed cookie to maintain the login session.

The issue is that when the user is logged in, I want to send the exact same pages, just with their login details in the custom header bar (most posts I have found here discuss sending an entirely new page on login, which I know how to do).

I guess I'm a bit perplexed by this, because I am reading an entire html file in, so it can't be edited on the spot, and I don't want to do a websocket call, because their information should be loaded in from the moment the page loads.

I'm sure I'm just missing something very simple here, but I haven't been able to find anything through searching.

It sounds like you want to send similar pages and not the exact same pages. If that is the case then I would suggest you use view templates to generate the HTML on the server instead of using static HTML files. I use Kiwi and I have a single layout.kiwi file that renders the main layout for many of my pages. The layout template renders links in the header section with this:

    {{each headerItems}}
      {{if $value.link}}
        <a href="${$value.link}">${$value.title}</a>
      {{else}}
        <span>${$value.title}</span>
      {{/if}}
    {{/each}}

On the server I build an array {link: '', title: ''} objects and pass that to the function that renders the template. I build a different array depending on whether the user is logged in or whether the user has access to additional administration pages.