I currently have 2 issues with the navbar I’m working on. The first issue is regarding the hover feature on navbar links.My intention is to have an underline appear in the color purple (#9908ff) when a user hovers over the links in the navbar. However, the hover code in the CSS is not functioning as expected.
The second issue is regarding the alignment of the 3 sections in the navbar. I have the logo on the left, navbar links in the middle and buttons on the right. The challenge arises when I attempt to add space between the two buttons on the right, aiming for a more balanced spacing between the sections. Currently, the buttons on the right appear very cramped together. How can I resolve this issue?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/css/test.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fake News and Critical Thinking</title>
<!-- fontawesome -->
<script src="https://kit.fontawesome.com/952dcc46a8.js" crossorigin="anonymous"></script>
<!-- google font import; montserrat -->
<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=Montserrat:ital,wght@0,100;0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- google font import; gabarito -->
<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=Gabarito:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
<!-- header -->
<header>
<div class="nav-container">
<img src="/img/IV-3.png" alt="logo" class="logo">
<nav>
<ul class="nav-links">
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Current Affairs</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Entertainment</a></li>
</ul>
</nav>
<div class ="nav-btns">
<a href="#"><i class="fa-solid fa-magnifying-glass"></i></a></li>
<a href="#"><i class="fa-sharp fa-solid fa-bars"></i></a>
</div>
</div>
</header>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
width: 100%;
margin-top: 20px;
background: #0b0e16;
}
.logo {
width: 200px;
cursor: pointer;
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
}
a {
font-family: 'Gabarito', cursive;
font-weight: 500;
font-size: 13px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
.nav-links {
list-style: none;
display: flex;
}
.nav-links li {
display: inline-block;
margin: 20px;
}
.nav-links li a:hover,
.nav-links li a.active {
color: #ece0ff;
}
.nav-links li a:hover::after,
.nav-links li a.active::after {
content: "";
width: 100%;
height: 4px;
background: #9908ff;
position: absolute;
bottom: -4px;
left: 0px;
}
Thanks in advance
2
Answers
For spacing between the nav buttons you can use:
For underline menus on hover you can use:
Hover effect
Spacing between buttons