How do I change the top padding in a navbar?

by

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>

  • margin:0 to h3 ?

    – 

  • I can not reproduce that enlarging effect. Maybe you have additional CSS applied?

    – 

  • The enlarging effect is the top and bottom have extra padding

    – 

  • 1

    You might want to look at semantics. h3 is for headlines not for navbar items. Use <nav> as container and an actual unordered list of anchors. The issue will resolve tiself

    – 

  • Hover on .nav only changes the background-color nothing else, no enlargement of anything. Can’t reproduce your issue.

    – 

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;
}

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>

Leave a Comment