How do I position my nav links relative to my navbar?-CodePudding

I have a nav bar where I'm trying to position my nav links according to my nav bar where the nav links should start after the navbar, linked with the bottom of the nav bar. Here is what I'm trying to achieve:

I want the red portion to start from the bottom of the nav bar. Here is my current code:

css

.nav {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }

  .nav-links {
    flex-direction: column;
    align-self: center;
    position: absolute;
    background-color: red;
    padding: 2rem;
    top: 10rem;
    width: 100%;
  }

  .nav-link {
    padding: 1rem 0;
  }

HTML

<div className='nav'>
      <span className='logo'>Connect.</span>
      <nav className='nav-links'>
        <a href='#' className='nav-link'>Product</a>
        <a href='#' className='nav-link'>Features</a>
        <a href='#' className='nav-link'>Reviews</a>
        <a href='#' className='nav-link'>Pricing</a>
        <a href='#' className='nav-link'>FAQ</a>
        <button className='button'>download</button>
      </nav>
    </div>

CodePudding user response：

I have added display flex to the nav-links itself and align-items to center not align self.

.nav {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }

  .nav-links {
    display:flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    background-color: red;
    padding: 2rem;
    top: 10rem;
    width: 100%;
  }
  .nav-links > a{
  text-decoration:none;
  color:white;
  }

  .nav-link {
    padding: 1rem 0;
  }

<div class='nav'>
      <span class='logo'>Connect.</span>
      <nav class='nav-links'>
        <a href='#' class='nav-link'>Product</a>
        <a href='#' class='nav-link'>Features</a>
        <a href='#' class='nav-link'>Reviews</a>
        <a href='#' class='nav-link'>Pricing</a>
        <a href='#' class='nav-link'>FAQ</a>
        <button class='button'>download</button>
      </nav>
    </div>

CodePudding user response：

First of all, you're writing className example: <div className='nav'> which is incorrect replace them with class example: <div class='nav'>, and your code is not showing the desired results. So, I've written some code through which you can achieve the desired output hope this code will help you achieve what you're aiming for. This code can surely be optimized more according to your needs and desires so feel free to change the dynamics it's just a general idea of how you can achieve the requested output.

HTML:

<div class='nav'>
    <span class='logo'>Connect.</span>
    <ul>
        <li><a href='#'>Product</a></li>
        <li><a href='#'>Features</a></li>
        <li><a href='#'>Reviews</a></li>
        <li><a href='#'>Pricing</a></li>
        <li><a href='#'>FAQ</a></li>
        <button class='button'>download</button>
    </ul>
</div>

CSS:

   ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 850px;
    width: auto;
    background-color: red;
  }
  
  li a {
    display: flex;
    flex-direction: column;
    color: #000;
    padding: 70px 0;
    text-decoration: none;
    text-align: center;
  }
  
  /* Change the link color on hover */
  li a:hover {
    background-color: transparent;
    color: white;
  }

.button{
    display: flex;
   margin: auto;
   padding: 7px;

}