Search code examples
htmlcssvertical-alignment

How to move an image vertically downwards inside a navigation menu with HTML and CSS

Currently there is a functional and togglable navigation menu within a webpage. An image is also embedded within the navigation menu, position below the text.

It would be nice to reposition the image to be at the very bottom of the navigation menu to eliminate any empty space below it. What would be the best approach to accomplish this?

Here is a picture for context.

enter image description here

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

  • Add flex style to nav container.

    nav {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}