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

Question

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.

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

Answer 1

Add flex style to nav container.

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

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

Question

1 answers

solution1
2 ACCPTED 2020-11-13 08:23:40

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

Question

1 answers

solution1 2 ACCPTED 2020-11-13 08:23:40

solution1
2 ACCPTED 2020-11-13 08:23:40