Question 234945 in Html Question posted in
Some basic documentation can be found here.

Html – How do I change the top padding in a navbar?

I have a navbar, yet whenever I hover the top and bottom are always enlarged. If I add height=100px it still doesn’t change.

#navbar {
  display: flex;
  justify-content: space-between;
}

.nav {
  margin: 1px auto;
  padding: 2px 6px;
}

.nav:hover {
  background-color: #84a98c;
}
<div id="navbar">
  <div class="nav">
    <h3>Home</h3>
  </div>
  <div class="nav">
    <h3>About</h3>
  </div>
  <div class="nav">
    <h3>Tools</h3>
  </div>
  <div class="nav">
    <h3>Contact</h3>
  </div>
</div>
Tags:

2

Answers


  1. 0

    simply adjust the padding-top

    Code

    #navbar {
    display: flex;
    justify-content: space-between;
}

.nav {
    margin: 0; /* Reset margin */
    padding: 10px 6px 2px 6px; /* Adjust top padding here */
    height: 100px; /* Fixed height */
}

.nav h3 {
    margin: 0; /* Reset margin */
}

.nav:hover {
    background-color: #84a98c;
}
    Login or Signup to reply.
  2. 0

    I am not sure if you wanted it that way but here is how I made it:

    *{
  margin: 0;
  padding: 0;
}
#navbar {
  display: flex;
  justify-content: space-between;

  bottom: 0px;
  top:0px;
}

h3 {
  margin: 1px auto;
  padding: 2px 6px; 
  bottom: 0px;
}

h3:hover {
  background-color: #84a98c;
}
    <!DOCTYPE html>
<html>
<body>
  <nav id="navbar">
    <h3>Home</h3>
    <h3>About</h3>
    <h3>Tools</h3>
    <h3>Contact</h3>
  </nav>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search