PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, November 17, 2022

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

 November 17, 2022     css, html, vertical-alignment     No comments   

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.

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


Answered By - wangdev87
Answer Checked By - Candace Johnson (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing