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

Question

how do I make my 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;
}

user_16496357 · Answer

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





  
  
  
  Website
  
  
  
  



  
    Logo
    
      
        Home
        News
        Contact
        About

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

1 Answers