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

Question

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;
}

user_14190543 · Answer

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;
}

user_16496357 · Answer

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;
}

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

2 Answers