Why is my NavBar's background not covering the last menu item? - css

Question

Something on my website is bothering me.
The last menu item of my Navbar is outside it's container's background:
Here is how my CSS looks like:
.nav-menu {
display: flex;
flex-direction: column;
width: 100%;
height: 280px;
position: absolute;
top: 80px;
left: -100%;
opacity: 1;
transition: all 0.5s ease;
align-items: space-evenly;
}
.nav-menu.active {
display: flex;
flex-direction: column;
align-content: flex-start;
background: #242222;
left: 0;
opacity: 1;
transition: all 0.5s ease;
z-index: 1;
}
.nav-links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.nav-links:hover {
background-color: #fff;
color: #242424;
border-radius: 0;
}
.navbar-logo {
position: absolute;
top: 0;
left: 0;
transform: translate(25%, 50%);
}
.menu-icon {
display: block;
position: absolute;
top: 0;
right: 0;
transform: translate(-100%, 60%);
font-size: 1.8rem;
cursor: pointer;
}
.fa-times {
color: #fff;
font-size: 2rem;
}
.nav-links-mobile {
display: block;
text-align: center;
margin: 2rem auto;
border-radius: 4px;
width: 80%;
text-decoration: none;
font-size: 1.5rem;
background-color: transparent;
color: #fff;
padding: 14px 20px;
border: 1px solid #fff;
transition: all 0.3s ease-out;
}
.nav-links-mobile:hover {
background: #fff;
color: #242424;
transition: 250ms;
}
}
and HTML generated by a React component looks like this:
<>
<nav className='navbar'>
<div className='navbar-container'>
<Link to='/' className='navbar-logo' onClick={closeMobileMenu}>
LOGO
</Link>
<div className='menu-icon' onClick={handleClick}>
<i className={click ? 'fas fa-times' : 'fas fa-bars'} />
</div>
<ul className={click ? 'nav-menu active' : 'nav-menu'}>
<li className='nav-item'>
<Link to='/' className='nav-links' onClick={closeMobileMenu}>
Home
</Link>
</li>
<li className='nav-item'>
<HashLink to='/#wherewefly' onClick={closeMobileMenu} className='nav-links'>
Where we fly
</HashLink>
</li>
<li className='nav-item'>
<Link
to='/services'
className='nav-links'
onClick={closeMobileMenu}
>
Promotions
</Link>
</li>
<li className='nav-item'>
<Link
to='/products'
className='nav-links'
onClick={closeMobileMenu}
>
Contact
</Link>
</li>
</ul>
{button && <Button buttonStyle='btn--outline'>LOGIN</Button>}
</div>
</nav>
</>
How can I make the last menu item (Contact) be covered by the black background too?
I have tried changing the height but the menu items "follow" and are aligned to the bottom. I can't find out how to change it though.
Edited: Picture has been updated

Answer 1

Remove height: 280px;.
You are using flex-box so you shouldn't be setting the height or width attributes. The idea is to allow the box to be flexible to it's contents.
If you want a fixed height you should be using flex-basis attribute.
EXAMPLE
I have had to convert your react to html to demonstrate but as you can see the code you provided works as expected. This would indicate the issue lies elsewhere in code you have not provided.
.nav-menu {
display: flex;
flex-direction: column;
width: 100%;
position: absolute;
top: 80px;
left: -100%;
opacity: 1;
transition: all 0.5s ease;
align-items: space-evenly;
}
.nav-menu.active {
display: flex;
flex-direction: column;
align-content: flex-start;
background: #242222;
left: 0;
opacity: 1;
transition: all 0.5s ease;
z-index: 1;
}
.nav-links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.nav-links:hover {
background-color: #fff;
color: #242424;
border-radius: 0;
}
.navbar-logo {
position: absolute;
top: 0;
left: 0;
transform: translate(25%, 50%);
}
.menu-icon {
display: block;
position: absolute;
top: 0;
right: 0;
transform: translate(-100%, 60%);
font-size: 1.8rem;
cursor: pointer;
}
.fa-times {
color: #fff;
font-size: 2rem;
}
.nav-links-mobile {
display: block;
text-align: center;
margin: 2rem auto;
border-radius: 4px;
width: 80%;
text-decoration: none;
font-size: 1.5rem;
background-color: transparent;
color: #fff;
padding: 14px 20px;
border: 1px solid #fff;
transition: all 0.3s ease-out;
}
.nav-links-mobile:hover {
background: #fff;
color: #242424;
transition: 250ms;
}
<nav class='navbar'>
<div clas='navbar-container'>
<a class='navbar-logo'> LOGO
</a>
<div class='menu-icon'>
<i class='fas fa-times' />
</div>
<ul class='nav-menu active'>
<li class='nav-item'>
<a class='nav-links'> Home
</a>
</li>
<li class='nav-item'>
<a class='nav-links'>
Where we fly
</a>
</li>
<li class='nav-item'>
<a class='nav-links'> Promotions
</a>
</li>
<li class='nav-item'>
<a class='nav-links'> Contact
</a>
</li>
</ul>
<Button class='btn--outline'>LOGIN</Button>
</div>
</nav>

Answer 2

Well, the height is fixed in the CSS, if you want it to take the height the content has you need to use "fit-content".

Answer 3

Blockquote
The issue could be the height of the nav-menu. please use min-hight instead. This may fix your issue
.nav-menu {
display: flex;
flex-direction: column;
width: 100%;
min-height: 280px;
position: absolute;
top: 80px;
left: -100%;
opacity: 1;
transition: all 0.5s ease;
align-items: space-evenly;
}