Omitting <header> element from pages to aid use of ‘sticky’ navigation [closed]

I would like to have the following (simplified) HTML document structure:

<body>
  <header>
    <div>Search form / Social media links / Contact details</div>
    <div>Logo / Strapline</div>
    <nav>Main navigation links</nav>
  </header>
  <main>
    <p>Main content...</p>
  </main>
</body>

The <header> element is pretty typical, containing three groups of content (as described above). One of the requirements is that it has a 'sticky' navigation menu, which remains stuck to the top of the browser window when a user scrolls down. CSS's position: sticky property would be ideal for this, but it only works relative to the container element i.e. in this case, the <header>, so effectively applying nav { position: sticky; } does not work in this context, and the only way to get it to work would be to move it outside the <header> element.

So I have a conundrum. Do I omit the <header> element entirely? If so, is there any accessibility down-side of doing this or anything I need to include (aria roles etc) to compensate? Do I keep the header element for the other groups of content and move the nav out of it (feels a bit weird!)? Or do I find an alternative approach to facilitating the stickiness of the nav (the solutions for this all feel a bit hacky and rely on intersection observers and manually updating the heights of things on browser resize etc)?

I want to keep the site as close to 'bare metal' as possible, so using CSS's position: sticky feels right, but then I don't want to do that at the risk of jeopardising accessibility.

Can anyone offer and insight as to the best way of approaching this?

Many thanks :)

Tags: , , , , , ,