Portfolio question

HTML-CSS
#1

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

#2

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;
#3

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

1 Like