CODEWITHSUNDEEP
htmlcss
problemSolver
problemSolver

Reputation: 27

Page Content Under Nav-bar Moves with CSS Animations

I need help with my horizontal nav-bar that is at the top of my webpage.I am using a CSS animation to make my nav-button's font-size increase on focus and hover. I only want my nav-bar to move when nav-items are focused or hovered. My only problem is that the content beneath the nav-bar moves down when my nav-button is focused or hovered. I only need help with making the content beneath my nav-bar unaffected by the growing font-size of my focused or hovered nav-buttons.

    /*NAVBAR CSS STARTS HERE*/
    nav {
    margin-left: 15%;
    }
    .navbar {
    list-style: none;
    padding: 0px;
    overflow: hidden;
    display: inline;
    text-align: center;
    }
    .navbar li{
    display: inline;
    }
    .nav-link a {
      margin-left: 1%;
      padding: 14px 30px;
      text-decoration: none;
      background-color: rgba(0, 0, 0, 0.548);
      font-size: 20px;
      color: rgb(255, 255, 255);
      border-radius: 5px;
      font-weight: bold;
      letter-spacing: 5px; 
  }
  
  .nav-link a:hover, .nav-link a:focus {
    animation: grow 0.5s;
    animation-fill-mode: forwards;
  }
  
  /*nav-bar css ends here*/

Here's the HTML below for one of the webpages on my website.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- 
    scale=1.0">
    <meta name="author" content="Maurice Rogers">
    <title>My Short Bio</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <div class="backgroundImg">
    <header id="page-top">
    <h1><span>Maurice Rogers</span></h1>
    <nav>
    <ul class="navbar">
        <li class="nav-link"><a class="nav-link" 
    href="index.html">Bio</a></li>
        <li class="nav-link"><a class="nav-link" href="technical- 
    resume.html">Technical Resume</a></li>
        <li class="nav-link"><a class="nav-link" href="my- 
    animations.html">Animations</a></li>
        <li class="nav-link"><a class="nav-link" href="me- 
    surfing.html">Surfing</a></li>          
    </ul>
    </nav>
    </header>   
    <main>

    <br/>
    <h2><span>My Bio</span></h2>
    <br/>
    <div class="box">
    <p>I love to code. I find it to be very fun, interesting, and 
    rewarding. You can <a href="technical-resume.html" 
    accesskey="t">find my Technical Resume here</a>. I also have other 
    cool interests. I've spent many hours making animations. You can 
    <a href="my-animations.html" accesskey="a">view my animations 
    here</a>. I've been surfing all my life. It really is one of my 
    favorite things to do. You can <a href="me-surfing.html" 
    accesskey="s">see me surfing here</a>.</p>
    </div>

    </main>
    <footer>
    <nav>
    <a class="ftr-nav-link" href="index.html">Back to top</a>
    </nav>
    <h4 class="copy-right">&copy; 2021 Maurice Rogers</h4>
    </footer>
    </div>
    </body>
    </html>

Upvotes: 1

Views: 618

Answers (2)

Bert W
Bert W

Reputation: 556

I had to modify your code to get the desired result. I used transform: scale() to increase the font-size without affecting the buttons. Apparently if you use display: inline then scale() will not work so I changed around your code and use flexbox properties. Also there were a few issues with your html, you declared the class nav-link on both your a and li, so I removed the class from a. Hope this works for you.

 /*NAVBAR CSS STARTS HERE*/
    nav {
    margin-left: 15%;
    }
    .navbar {
    list-style: none;
    padding: 0px;
    overflow: hidden;
    display: flex;
    text-align: center;
    }

    .nav-link {
      margin-left: 1%;
      padding: 14px 30px;
      text-decoration: none;
      background-color: rgba(0, 0, 0, 0.548);
      font-size: 20px;
      color: rgb(255, 255, 255);
      border-radius: 5px;
      font-weight: bold;
      letter-spacing: 5px; 
      transition: transform .5s;
  }
.nav-link a {
  display: block;
  color: white;
  text-decoration: none;
}
  
  .nav-link a:hover{
    transform: scale(1.2);
  }
  
  /*nav-bar css ends here*/
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- 
    scale=1.0">
    <meta name="author" content="Maurice Rogers">
    <title>My Short Bio</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <div class="backgroundImg">
    <header id="page-top">
    <h1><span>Maurice Rogers</span></h1>
    <nav>
    <ul class="navbar">
        <li class="nav-link"><a  
    href="index.html">Bio</a></li>
        <li class="nav-link"><a  href="technical- 
    resume.html">Technical Resume</a></li>
        <li class="nav-link"><a  href="my- 
    animations.html">Animations</a></li>
        <li class="nav-link"><a  href="me- 
    surfing.html">Surfing</a></li>          
    </ul>
    </nav>
    </header>   
    <main>

    <br/>
    <h2><span>My Bio</span></h2>
    <br/>
    <div class="box">
    <p>I love to code. I find it to be very fun, interesting, and 
    rewarding. You can <a href="technical-resume.html" 
    accesskey="t">find my Technical Resume here</a>. I also have other 
    cool interests. I've spent many hours making animations. You can 
    <a href="my-animations.html" accesskey="a">view my animations 
    here</a>. I've been surfing all my life. It really is one of my 
    favorite things to do. You can <a href="me-surfing.html" 
    accesskey="s">see me surfing here</a>.</p>
    </div>

    </main>
    <footer>
    <nav>
    <a class="ftr-nav-link" href="index.html">Back to top</a>
    </nav>
    <h4 class="copy-right">&copy; 2021 Maurice Rogers</h4>
    </footer>
    </div>
    </body>
    </html>

Upvotes: 1

LJD
LJD

Reputation: 496

You could try putting a position: absolute on your ul tag and start from there.

Upvotes: 2

Related Questions