CSS Style Side Navbar with Icons - html

Question

I am currently building a dashboard for a project I'm workig on - as i didn't touch css for years now i kinda struggle with a side Nav Bar.
<div id="nav">
<div id="nav-wrapper">
<ul>
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-home"></i></li
<li><i class="fas fa-home"></i></li>
</ul>
</div> <!--End of nav-wrapper-->
</div> <!--End of nav-->
#nav{
width: 10%;
height: 100%;
background-color: #273138;
position: fixed;
a{
color: white;
text-decoration: none;
}
#nav-wrapper{
padding: 30px 0px 30px;
font-size: 2em;
}
}
This is what my navbar basicaly looks like. I want the elements centered and rounded - similarly to the style discord uses for it's server list (Link)
Any idea how i can build this in css?

Answer 1

I have created a solution in JSFiddle
JSFiddle
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
#nav {
width: 10%;
height: 100%;
background-color: #273138;
position: fixed;
}
#nav-wrapper {
font-size: 1.5em;
}
#nav-wrapper ul {
display: block;
}
#nav-wrapper li {
list-style: none;
background-color: #d24d57;
height: 50px;
width: 50px;
margin: 10px auto;
border-radius: 100%;
text-align: center;
line-height: 50px;
}
#nav-wrapper li a {
color: white;
text-decoration: none;
}

Answer 2

I have made something, does it looks like what you want?
body{
margin: 0px;
}
#nav {
height: 100%;
width: 10%;
background-color: #273138;
position: fixed;
}
#nav-wrapper{
display: flex;
justify-content: center;
align-items: center;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
li{
margin-top: 2px;
background-color: orange;
border-radius: 100%;
padding: 5px;
font-size: 2em;
}
a{
color: white;
text-decoration: none;
}
plus, this is not recommended to nest classes

Answer 3

I hope this can help you.
body {
background-color: #36393e;
}
#nav {
width: auto;
height: 100%;
background-color: #1f2125;
position: fixed;
}
#nav ul {
list-style: none;
padding-left: 0;
margin: 0;
position: relative;
padding-top: 20px;
padding-bottom: 20px;
}
#nav ul::before {
position: absolute;
content: '';
top: 15px;
left: 25%;
background-color: #2E3136;
width: 50%;
height: 1px;
}
#nav ul::after {
position: absolute;
content: '';
bottom: 15px;
left: 25%;
background-color: #2E3136;
width: 50%;
height: 1px;
}
#nav ul li {
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
margin: 10px;
}
#nav a {
background-color: #2E3136;
border-radius: 100%;
padding: .5em;
color: white;
text-decoration: none;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
#nav a {
animation: hover-out 0.6s ease;
}
#nav a:hover, #nav a:focus {
animation: hover-in 0.8s ease forwards;
}
#nav a i {
font-size: 1em;
}
#nav #nav-wrapper {
font-size: 2em;
}
#keyframes hover-in {
0% {
border-radius: 100%;
background-color: #2E3136;
}
40% {
border-radius: 12px;
}
70% {
border-radius: 16.7px;
}
80% {
background-color: #7289DA;
}
100% {
border-radius: 15px;
background-color: #7289DA;
}
}
#keyframes hover-out {
0% {
border-radius: 15px;
background-color: #7289DA;
}
45% {
border-radius: 70%;
background-color: #2E3136;
}
65% {
border-radius: 70%;
}
75% {
border-radius: 75%;
}
100% {
border-radius: 100%;
}
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="nav">
<div id="nav-wrapper">
<ul>
<li><i class="fa fa-home"></i></li>
<li><i class="fa fa-home"></i></li>
<li><i class="fa fa-home"></i></li>
<li><i class="fa fa-home"></i></li>
<li><i class="fa fa-home"></i></li>
</ul>
</div> <!--End of nav-wrapper-->
</div> <!--End of nav-->