Search code examples
htmlcssportfolio

CSS Overflow property isn't working on navigation bar links

I've been working on my portfolio and I came across this video where you hover the navigation links and they make an upward transition. YouTube Video

The css overflow method which I've applied according to the video that will remove duplicate navlinks (About me, Tools etc.) but this isn't working for me and I can't figure out why.

Relevant HTMl:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Protfolio</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
        <link rel="stylesheet" href="./style.css"/>
        
    </head>
    <body>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
        <nav>
          <div class="space1">
            <div class="centered-content nav-logo">Logo</div>
            <div class="centered-content empty-space1">
              <!--empty space-->
            </div>
          </div>
          <div class="space2">
            <div class="centered-content empty-space2">
              <!--empty space-->
            </div>
            <div class="centered-content nav-links">
              <ul class="centered-content">
                <li>
                  <a href="">
                    
                  <span>About Me</span>
                  <span>About Me</span>
                </a>
              </li> 
                <li>
                  <a href="">
                    <span> Contact</span>
                  <span> Contact</span>
                </a>
              </li>
                <li>
                  <a href="">
                    <span>Blog</span>
                    <span>Blog</span>
                  </a>
                </li>
                <li>
                  <a href="">
                  <span>Projects</span>
                  <span>Projects</span>
                </a>
              </li>
                <li>
                  <a href="">
                    <span>Tools</span>
                    <span>Tools</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <div class="intro-container">
       <div class="intro-para">
            <h1>Greetings All!!</h1>
                Intro-content</div>
           <div class="centered-content intro-image">
               the image goes 
           </div>
</div>
    </body>
</html>

Relevant CSS:

    /* ADDITION */

.centered-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  
  
  /* END */
  
  * {
    box-sizing: border-box;
    margin: 0%;
    padding: 0%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
  
  body {
    background-color:peachpuff;
    font-family: roboto;
    background-repeat: space;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  nav {
    display: flex;
    height: 10vh;
    background-color: crimson;
  }
  
  .space1 {
    justify-content: center;
    align-items: center;
    display: flex;
    width: 50%;
    
  }
  
  .nav-logo {
    display: flex;
    
    width: 50%;
    height: 100%;
  }
  
  .empty-space1 {
    display: flex;
    width: 50%;
    height: 100%;
  }
  
  .space2 {
    display: flex;
    width: 50%;
    
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  
  .empty-space2 {
    display: flex;
    width: 50%;
    height: 100%;
  }
  
  .nav-links {
    display: flex;
    width: 50%;
    height: 100%;
    
  }
  
  .nav-links ul {
    display: inline-flex;
    list-style: none;
    /* REMOVED! */
    /* height: 100%; */

    
  }
  
  .nav-links ul li{
    position: relative;

  }
  .nav-links ul li a {
    position: relative;
    display: block;
    justify-content: space-evenly;
    text-decoration:none;
    margin: 0 .4em;
    color: black;  
    overflow: hidden;
    letter-spacing: 2px;
  }

  .nav-links ul li a span{
    display: flex;
    width: 100%;
    position: relative;
    transition: 0.5s;
    background-color: lightslategrey;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
    flex-direction: column;  
  }

  .nav-links ul li a:hover span{

  }

.intro-container{
      display: flex;
      padding: .2% .3% 0 .3% ;
  }

  .intro-para{    
      background-color:salmon;
      width: 50%;
      
  }

  .intro-image{
      width: 50%;
    background-color: lightskyblue;
  }

Relevant Picture

Solution

  • Your element should have a height. You have not provided height or max-height attribute for the .nav-links ul li a selector as given in the Youtube video link you provided.