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)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.