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

Html – A padding issue when creating a navigation bar

I have just started HTML and CSS, and I want to make a navigation bar. I ran into a problem where each of my links has this weird padding under it when I hover over the links, as shown in pictures. Are there any ways to fix the issue without deleting the padding?

Picture 1
Picture 2

Browser: Microsoft Edge 126.0.2592.87

h1 {
  text-align: center;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: normal;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #131842;
}

.navbar a {
  color: white;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 8px;
}

.navbar a:hover {
  background-color: #405D72;
}
<header>
  <nav class="navbar">
    <ul>
      <li><a href="home.html">Home</li>
      <li><a href="projects.html">Projects</li>
      <li><a href="about.html">About</li>
    </ul>
  </nav>
</header>

I was following this video and was expecting a similar result shown in the video.

https://www.youtube.com/watch?v=f3uCSh6LIY0&t=232s

The navbar in the video:

The nav bar in the video

Tags:

2

Answers


  1. 0

    Your problem arises because you are not closing your <a> tags.

    <nav> bars don’t require <ul> and <li> tags … just <a> tags. This will result in a simpler structure which is more robust and accessible. See this snippet.

    nav {
  background-color: #131842;
}

nav a {
  color: white;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 8px;
}

nav a:hover {
  background-color: #405D72;
}
    <header>
  <nav>
    <a href="home.html">Home</a>
    <a href="projects.html">Projects</a>
    <a href="about.html">About</a>
  </nav>
</header>
    Login or Signup to reply.
  2. 0

    Don’t forget to add your </a>closing tag. Here’s a markup validator to let you check your future works – https://validator.w3.org/

    h1 {
  text-align: center;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: normal;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #131842;
}

.navbar a {
  color: white;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 8px;
}

.navbar a:hover {
  background-color: #405D72;
}
    <header>
  <nav class="navbar">
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </nav>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search