This is a general question. Here is the proposed menu design for desktop: https://i.sstatic.net/4Ynfy.png
and this is how it would look on mobile:
https://i.sstatic.net/lM3SO.png
I have experimented with different approaches:
1: Utilizing two separate headers and toggling their visibility using CSS, which makes styling easy but may not be ideal for screen readers.
<header class="mobile-header">
</header>
<header class="desktop-header">
</header>
2: Using a single header structure:
<header>
<h1 aria-label="Brandname">
<a class="" href="/">
Brandname
</a>
</h1>
<nav class="main-menu-wrapper" role="navigation">
<button class="toggle-mobile-menu" aria-expanded="false">Menu</button>
<ul class="main-menu">
(menu items here)
</ul>
</nav>
</header>
I like the syntax of the second approach, and it works well on mobile devices. However, I am unsure how to style it effectively for desktop views. One idea was to use position: absolute for submenus, but this might require JavaScript for calculating heights. Is there a simpler solution?
For reference, here is an example website with similar functionality:
Desktop View:
https://i.sstatic.net/SuVfe.png
Mobile View:
https://i.sstatic.net/jEaJX.png
It appears that they have used two separate header elements, but I am looking for a way to achieve this without duplicating headers.