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 >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>
CodePudding user response:
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 >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>