How do I move a horizontal nav menu from the top to the bottom of a section with flexbox?

user_19217190 0
Viewed 30

img {
    display: block;
  }

  .header {
    background-color: #9c0d0d;
    height: 100px;
    
  
  }

  .header ul {
    color: black;
    font-weight: bold;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 50px;

  }

  li {
    display: inline;
  }

  a, a:hover, a:focus, a:active {
    text-decoration: none;
    color: inherit;
}
<div class="header">
    <ul class="headermenu">
      <li><a href="wwww">New & Featured</a></li>
      <li><a href="wwww">Men</a></li>
      <li><a href="wwww">Women</a></li>
      <li><a href="wwww">Kids</a></li>
      <li><a href="wwww">Sale</a></li>
    </ul>
       </div>

I'm making a navigation menu on my header and I want this menu to be at the bottom of my .header section. I've been trying and I have no idea why align-items doesn't work.

flexbox css html
1 Answers

You can add align-items: flex-end; in .header class in this case.

img {
    display: block;
  }

  .header {
    background-color: #9c0d0d;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .header ul {
    color: black;
    font-weight: bold;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 50px;

  }

  li {
    display: inline;
  }

  a, a:hover, a:focus, a:active {
    text-decoration: none;
    color: inherit;
}
<div class="header">
    <ul class="headermenu">
      <li><a href="wwww">New & Featured</a></li>
      <li><a href="wwww">Men</a></li>
      <li><a href="wwww">Women</a></li>
      <li><a href="wwww">Kids</a></li>
      <li><a href="wwww">Sale</a></li>
    </ul>
</div>

user_179765990
Related