unable to move last child of my nav bar to the bottom of the navbar-CodePudding

Unable to move my GitHub icon/link to the bottom of the navbar. I'm trying to use the last-child margin-top auto however it won't work for me. is there something wrong in my code, or am I going about it the wrong way? any advice would be great. I'm new to HTML and CSS so if you see anything you would change in general please let me know.

:root {
  font-size: 16px;
  font-family: 'Open sans';
}

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

body {
  color: white;
  background-color: black;
}

body::-webkit-scrollbar {
  width: 0.3rem;
}

body::-webkit-scrollbar-track {
  background-color: red;
}

body::-webkit-scrollbar-thumb {
  background-color: blueviolet;
}

main {
  margin-left: 15rem;
  padding: 1rem;
}


/****** Navbar ******/

.img-logo {
  width: 15rem;
  margin-top: 1rem;
}

.navbar {
  position: fixed;
  background-color: blueviolet;
  width: 15rem;
  height: 100vh;
}

.navbar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.nav-link {
  display: flex;
  align-items: center;
  height: 5rem;
}

.nav-item:last-child {
  margin-top: auto;
}

<body>
  <div >
    <nav>
      <img  src="img/Logo.png" alt="My logo">

      <ul >

        <li >
          <a href="#" >
            <i ></i>
            <span >Home</span>
          </a>
        </li>

        <li >
          <a href="#" >
            <i ></i>
            <span >About Me</span>
          </a>

        </li>

        <li >
          <a href="#" >
            <i ></i>
            <span >What I Do</span>
          </a>

        </li>

        <li >
          <a href="#" >
            <i ></i>
            <span >Projects</span>
          </a>
        </li>

        <li >
          <a href="#" >
            <i ></i>
            <span >Contact</span>
          </a>
        </li>

        <li >
          <a href="#" >
            <i ></i>
            <span ></span>
          </a>
        </li>

      </ul>
    </nav>
  </div>

CodePudding user response：

I got it working by flexing the navbar (parent of both navbar-nav and your image):

:root {
  font-size: 16px;
  font-family: 'Open sans';
}

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

body {
  color: white;
  background-color: black;
}

body::-webkit-scrollbar {
  width: 0.3rem;
}

body::-webkit-scrollbar-track {
  background-color: red;
}

body::-webkit-scrollbar-thumb {
  background-color: blueviolet;
}

main {
  margin-left: 15rem;
  padding: 1rem;
}


/****** Navbar ******/

.img-logo {
  width: 15rem;
  margin-top: 1rem;
  order: 2;
}

nav {
  display: flex;
  flex-flow: column nowrap;
  position: fixed;
  background-color: blueviolet;
  width: 15rem;
  height: 100vh;
}

.navbar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.nav-link {
  display: flex;
  align-items: center;
  height: 5rem;
}

.nav-item:last-child {
  margin-top: auto;
}

<body>
  <nav>
    <img  src="img/Logo.png" alt="My logo">

    <ul >

      <li >
        <a href="#" >
          <i ></i>
          <span >Home</span>
        </a>
      </li>

      <li >
        <a href="#" >
          <i ></i>
          <span >About Me</span>
        </a>

      </li>

      <li >
        <a href="#" >
          <i ></i>
          <span >What I Do</span>
        </a>

      </li>

      <li >
        <a href="#" >
          <i ></i>
          <span >Projects</span>
        </a>
      </li>

      <li >
        <a href="#" >
          <i ></i>
          <span >Contact</span>
        </a>
      </li>

      <li >
        <a href="#" >
          <i ></i>
          <span ></span>
        </a>
      </li>

    </ul>
  </nav>

CodePudding user response：

You already have a flexbox for your nav items so it makes sense to just add the logo as a list item. For this example, I called it .logo. You can then take this new list item and nest the image within. Next, we'll flex this new list item and use flex-basis: 100%;. Then you can specify align-items: flex-end; for it to be at the very bottom of the navbar.

From here, you can specify margin-left: auto; for it to be aligned to the right or the opposite for it to be aligned on the left.

:root {
  font-size: 16px;
  font-family: 'Open sans';
}

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

body {
  color: white;
  background-color: black;
}

body::-webkit-scrollbar {
  width: 0.3rem;
}

body::-webkit-scrollbar-track {
  background-color: red;
}

body::-webkit-scrollbar-thumb {
  background-color: blueviolet;
}

main {
  margin-left: 15rem;
  padding: 1rem;
}


/****** Navbar ******/

.img-logo {
  margin-top: 1rem;
}

.navbar {
  position: fixed;
  background-color: blueviolet;
  width: 15rem;
  height: 100vh;
}

.navbar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}

.nav-link {
  display: flex;
  align-items: center;
  height: 5rem;
}

.nav-item:last-child {
  margin-top: auto;
}

.logo {
  display: flex;
  flex-basis: 100%;
  align-items: flex-end;
}

<body>
  <div >
    <nav>
      <ul >
        <li >
          <a href="#" >
            <i ></i>
            <span >Home</span>
          </a>
        </li>
        <li >
          <a href="#" >
            <i ></i>
            <span >About Me</span>
          </a>
        </li>
        <li >
          <a href="#" >
            <i ></i>
            <span >What I Do</span>
          </a>
        </li>
        <li >
          <a href="#" >
            <i ></i>
            <span >Projects</span>
          </a>
        </li>
        <li >
          <a href="#" >
            <i ></i>
            <span >Contact</span>
          </a>
        </li>
        <li >
          <a href="#" >
            <i ></i>
            <span ></span>
          </a>
        </li>
        <li >
          <img  src="https://dummyimage.com/75/000/fff" alt="My logo">
        </li>
      </ul>
    </nav>
  </div>