CODEWITHSUNDEEP
htmlcssnavbar
Aldridge1991
Aldridge1991

Reputation: 1367

Remove navigation bar (invisible) padding

I'm triying to create a horizontal nav bar in my website. The problem is when I hover over one of the options. It gets highlighted but not as I want. This is the result:

enter image description here

As you can see there's some space which should be highlighted as well but it's not.

My Html and CSS:

.section ul {
  list-style: none;
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  text-align: center;
  background-color: #5fb763;
}
.section ul li {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 0.8em;
  width: 200px;
  height: 100%;
}
.section ul li a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}
.section ul li a:hover {
  background-color: #f0f0f0;
  height: 100%;
}
.section ul li a.active {
  background-color: rgba(198, 186, 186, 0.73);
  color: #444;
}
<body>
  <ul>
    <li class="home"><a href="#section1">El local</a>
    </li>
    <li class="tutorials"><a href="#section2">Como Llegar</a>
    </li>
    <li class="about"><a class="active">Historia</a>
    </li>
  </ul>
  <hr />
  <hr />
</body>

Upvotes: 1

Views: 165

Answers (2)

Mukul Kant
Mukul Kant

Reputation: 7122

Add line-height in li

line-height: 21px;

    .section ul {
  list-style: none;
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  text-align: center;
  background-color: #5fb763;
}
.section ul li {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 0.8em;
  width: 200px;
  height: 100%;
  line-height: 21px;
}
.section ul li a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}
.section ul li a:hover {
  background-color: #f0f0f0;
  height: 100%;
}
.section ul li a.active {
  background-color: rgba(198, 186, 186, 0.73);
  color: #444;
}
<div class="section">
  <ul>
    <li class="home"><a href="#section1">El local</a>
    </li>
    <li class="tutorials"><a href="#section2">Como Llegar</a>
    </li>
    <li class="about"><a class="active">Historia</a>
    </li>
  </ul>
</div>

Upvotes: 1

Jhey
Jhey

Reputation: 1377

If you don't need to support IE8. I would look at maybe using the nav tag instead for your needs. Consider the following snippet;

nav {
  text-align: center;
  background-color: green;
}
nav a {
  text-decoration: none;
  color: #fff;
  transition: .3s background-color;
}
nav a:hover {
  background-color: #f0f0f0;
}
nav a.active {
  background-color: rgba(198, 186, 186, 0.73);
  color: #444;
}
<body>
  <nav>
    <a href="#section1">El local</a>
    
    <a href="#section2">Como Llegar</a>

    <a class="active">Historia</a>
  </nav>
</body>

With your current solution you'll need to float the li elements in order to get the correct behaviour with specified widths I believe. You could also consider a flexbox solution.

There are some simple guidelines to creating CSS navigation bars here.

Hope that helps you out!

Upvotes: 1

Related Questions