Making a better selectable nav links

html, css, design, ux


Image by Pexels from Pixabay

When creating nav links, pad anchor tags, not the container elements.

When the container is padded, user need to click on the text exactly.
If anchor tag is padded, users can click near the text, for easier navigation.

better nav links





1<main>2  <header>3    <h2>Must select the link</h2>4    <nav class="nav-bad">5      <ul>6        <li><a href="#">Design</a></li>7        <li><a href="#">Components</a></li>8        <li><a href="#">Develop</a></li>9        <li><a href="#">Resources</a></li>10        <li><a href="#">Blog</a></li>11      </ul>12    </nav>13
14    <h2>Select the box area</h2>15    <nav class="nav-good">16      <ul>17        <li><a href="#">Design</a></li>18        <li><a href="#">Components</a></li>19        <li><a href="#">Develop</a></li>20        <li><a href="#">Resources</a></li>21        <li><a href="#">Blog</a></li>22      </ul>23    </nav>24  </header>25</main>
1.nav-bad {2  background-color: #eee;3  & ul {4    display: flex;5    padding: 20px;6    list-style: none;7    column-gap: 50px;8
9    & a {10      border: 1px solid red;11      text-decoration: none;12      font-weight: bold;13      font-size: 1.5rem;14      letter-spacing: 0.125rem;15      color: deeppink;16
17      &:hover {18        text-decoration: revert;19      }20    }21  }22}23
24.nav-good {25  background-color: #222;26  & ul {27    display: flex;28
29    list-style: none;30    column-gap: 50px;31
32    & a {33      border: 1px solid red;34      display: inline-block;35      padding: 20px;36      text-decoration: none;37      font-weight: bold;38      font-size: 1.5rem;39      letter-spacing: 0.125rem;40      color: deeppink;41
42      &:hover {43        text-decoration: revert;44      }45    }46  }47}