I have a list with corresponding hyperlinks in my code, and I am trying to make these elements the same size as the header. I attempted adding auto padding and height auto but it did not produce the desired result.
Here is the HTML snippet:
<header id="header" class="header">
<nav id="nav" class="nav">
<div id="brand" class="brand">
<img src="" alt="GEM Logo" />
</div>
<ul id="nav__menu" class="nav__menu">
<li><a href="/company">Company</a></li>
<li><a href="/solutions">Solutions</a></li>
<li><a href="/team">Team</a></li>
<li><a href="/aboutus">About Us</a></li>
<li><a href="/support">Support</a></li>
</ul>
</nav>
</header>
Furthermore, this is my Sass:
@import "_variables.scss";
.header {
background-color: $primary-color;
color: white;
padding: 20px;
& a{
color: white;
font-weight: bold;
}
}
.header .nav {
display: flex;
justify-content: space-between;
& .nav__menu {
display: flex;
& li {
margin-right: 15px;
text-transform:uppercase;
}
& li:hover {
animation: headerLinks;
animation-duration: 2s;
}
}
}
@keyframes headerLinks {
from {
border: none;
}
to {
border: 1px solid red;
}
}
https://i.stack.imgur.com/onzo5.png
The current output is acceptable, however, I need the li element and the a element to match the size of the header. My goal is to create an animation when the user hovers over the element, resulting in a change in background.