Currently, there is a fully functional navigation menu that can be toggled within a webpage. An image is also included in the navigation menu and positioned below the text.
I would like to move the image to the very bottom of the navigation menu to remove any empty space below it. What would be the best way to achieve this?
For reference, here is an image:
HTML
<html>
<div id="sideNav">
<nav>
<ul>
<li><a href="#banner">HOME</a></li>
<li><a href="#">COVID-19</a></li>
<li><a href="#service">SERVICES</a></li>
<li><a href="#reviews">REVIEWS</a></li>
<li><a href="#footer">CONTACT</a></li>
</ul>
<div id="nav_pic">
<img src ="images/nav_lotus.JPEG">
</div>
</nav>
</div>
</html>
CSS
#sideNav{
width: 200px; /*changes the width of sideNav*/
height: 100vh;
position: fixed;
right: -250px; /*make side bar intially hidden*/
top:0;
background: #009688;
z-index: 2;
transition: 0.33s;
}
.nav ul li{
list-style: none;
margin: 45px 15px;
}
.nav ul li a{
text-decoration: none;
color: #fff;
font-family: 'Raleway', sans-serif;
}
.nav_pic{
vertical-align: bottom;
}