Portfolio question

Good afternoon Y’all,

I’m working on the Portfolio Assignment and need some help with the background hover color.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width", initial-scale=1.0/>
<link rel="stylesheet" href="styles.css">
 <link
      href="https://fonts.googleapis.com/css?family=Acme:400&display=swap"
      rel="stylesheet"
    />
</head>
<body>

  <div id="pagewrapper">
    <header id="header">
  <nav id="navbar" class="nav wrapper">
    <ul class="horizontal-list">
      <li>
        <a href="#About">About</a>
        </li>

        <li>
          <a href="#Work">Work</a>
          </li>

        <li>
          <a href="#Contact">Contact</a>
          </li>   
</ul>
  </nav>
  </header>
  
  
  
  
  <section id="welcome-section">
    <h1>Hey I am Mimic</h1>

    </section>

    <section id="projects">

      </section>





































</div>
  </body>
  </html>


body{
  background: #454545;
  font-family: Acme;
  font-size: 30px; 
  word-spacing: 20px;
  width:90%;
  margin:auto;
  min-width:600px;
  max-width:2000px;
}

#pagewrapper{
  width: 900px;
  position: relative;
  margin: 0 auto;
  padding: 0 0 20px 0;
  }


#header{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
}

#navbar{
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  font-family: Acme, sans-serif;
  padding: 5px 50px;
  background-color: #ff1414;
  border: 4px solid darkred;
  border-bottom: 4px solid darkred;
  width: 100%;
  height: 100px;
  min-width: 900px;
  
}

nav{
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  float: right;
  margin-top: -20px;
  }

#navbar a {
  color: white;
  margin-left: 40px;
  font-size: 30px;
  
  
  
  }

ul.horizontal-list{
  list-style: none;
 }

  ul.horizontal-list li{
    display: inline-block;
    }

    li {
     
      
    }

a{
  text-decoration: none;
}

 #navbar a:hover{
   background-color: #00255c;
   
   
  }
    

The hover text is smaller than my navbar. I didn’t manage to get my hover background color as high as my navbar.

Does anyone have any tips?

Greetz,

Jackie

Change your css code by adding the padding property and its value:

#navbar a {
  color: white;
  margin-left: 40px;
  padding-bottom: 40px; --------------------- add this, value calculate as you wish
  font-size: 30px;

Thank you very much for your feedback. It’s working like a charm now.

1 Like