CODEWITHSUNDEEP
htmlcss
jennie
jennie

Reputation: 55

Is valid to use header twice to build nav?

as mozilla said https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header. and my design have logo in middle. is it right i do it like this? the reason i have 2 header, cause logo position will change in desktop mode to first. menu to 2nd position. search still same.

.container {
  width: 320px;
}

.container>div {
  display: flex;
}

.container>div>nav,
header {
  flex: 1;
}
<div class="container">
  <div>
    <nav>menu</nav>
    <header>logo</header>
    <header>search</header>
  </div>
</div>

Upvotes: 0

Views: 35

Answers (1)

isherwood
isherwood

Reputation: 61056

Not really, but this is a matter of opinion. What's "right" varies by philosophy. You can have more than one header, but using them stacked simply for layout could be an accessibility fail. I'd move the header element outward and replace with divs.

.container {
  width: 320px;
}

header {
  display: flex;
}

header>div,
header>nav {
  flex: 1;
}
<div class="container">
  <header>
    <nav>menu</nav>
    <div>logo</div>
    <div>search</div>
  </header>
</div>

Upvotes: 1

Related Questions