How do I make a link take entire available height using flexbox?

August 25, 2022

how do I make my <a> tags in my Navbar take the full available height from it´s parent instead of just the space required by the content?

Currently, the hover effect only triggers when you mouseover the TEXT, because that’s all the space that the content is taking. I want the entire available height to be clickable when hovered.

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --clr-800: #0d0d0d;
  --clr-600: #122459;
  --clr-400: #3565f2;
  --clr-200: #3d79f2;
  --clr-100: #f2f2f2;

  --font-primary: "Montserrat", sans-serif;
  --font-secondary: "Bebas Neue", cursive;
}

body {
  font-family: var(--font-primary);
  background: var(--clr-100);
  color: var(--clr-800);
  padding: 0;
  margin: 0;
}

h1 {
  font-family: var(--font-secondary);
}

header {
  background-color: var(--clr-800);
  color: var(--clr-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 0.5rem var(--clr-800);
  height: 40vh;

}

header > h1 {
  margin: 0 0 0 4rem;
}

nav > ul {
  display: flex;
  list-style-type: none;
  margin: 0 4rem 0 0;
  padding: 0;
}

nav > ul > li {
  margin-left: 2rem;
}

nav > ul > li > a {
  color: var(--clr-100);
  text-decoration: none;
}
nav > ul > li > a:hover {
  color: var(--clr-800);
  background-color: red;
  padding: 2rem 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;500;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <header>
        <h1 class="logo">Logo</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </nav>
    </header>
</body>

</html>

>Solution :

This structure should work nicely for you. I recommend getting good at using your browser dev tools. If you inspect your elements you will notice that nav and ul need to have height: 100%; to fill the available header height.

Then, you need to set min-height: 100%; on a and use flex with align-items: center; to center them once again. I adjusted the spacing by adding horizontal padding and margin on the a so it doesn’t affect the clicking area.

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --clr-800: #0d0d0d;
  --clr-600: #122459;
  --clr-400: #3565f2;
  --clr-200: #3d79f2;
  --clr-100: #f2f2f2;
  --font-primary: "Montserrat", sans-serif;
  --font-secondary: "Bebas Neue", cursive;
}

body {
  font-family: var(--font-primary);
  background: var(--clr-100);
  color: var(--clr-800);
  padding: 0;
  margin: 0;
}

h1 {
  font-family: var(--font-secondary);
}

header {
  background-color: var(--clr-800);
  color: var(--clr-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 0.5rem var(--clr-800);
  height: 40vh;
}

header>h1 {
  margin: 0 0 0 4rem;
}

nav>ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding-right: 3em;
}

nav>ul>li>a {
  color: var(--clr-100);
  text-decoration: none;
}

nav>ul>li>a:hover {
  color: var(--clr-800);
  background-color: red;
}

a {
  padding: 0 .5em;
  margin: 0 .5em;
}

nav,
ul {
  height: 100%;
}

a {
  min-height: 100%;
  display: flex;
  align-items: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <header>
    <h1 class="logo">Logo</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
  </header>
</body>

</html>