Issue

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

Solution

Add flex style to nav container.

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

Answered By - wangdev87

Answer Checked By - Candace Johnson (PHPFixing Volunteer)

Thursday, November 17, 2022

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

Issue

Solution

No comments:

Post a Comment