I created a navbar with a logo on the left side, links on the right side and another 2 links that are highlighted and I added a icon menu, which appears on small screens, but, the problem is that when I open the menu, the links are side by side and I want it to stay in column format.
I tried a lot of codes, but it doesn’t work — nothing happens. Also, I want to make the highlighted buttons stay inside the menu box too. By the way, I’m a completely beginner, so it’s really hard to me work with css, it’s kinda confusing. Could anyone save me please?
Here’s the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/main/style.css">
<link rel="stylesheet" href="/main/main.css">
<!--fonts -->
<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=Manrope:[email protected]&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/de42dd2adf.js" crossorigin="anonymous"></script>
<title>Bryant Ecom</title>
</head>
<body>
<!-- navegação -->
<header>
<nav id="navbar">
<img src="/images/logo.png" alt="Bryant Ecom" id="logo">
<div class="nav-links" id="navLinks">
<a href="index.html" class="active">Início</a>
<a href="link2.html">Link 2</a>
<a href="link3.html">Link 3</a>
<a href="link4.html">Link 4</a>
<a href="link5.html">Link 5</a>
<a href="link6.html">Link 6</a>
</div>
<div class="highlight-links">
<a href="#" class="nav-btn">Login</a>
<a href="#" class="nav-btn">Contato</a>
</div>
<a href="javascript:void(0)" class="btn" onclick="myFunction()">
<i class="fa-solid fa-bars"></i>
</a>
</nav>
</header>
<script src="/main/script.js"></script>
</body>
</html>
:root{
/* cores */
--cor-principal: #186fdb;
--cor-secundaria: #000000;
--cor-adicional: #ffffff;
/* fontes */
--ff:"Manrope", sans-serif;
--h1: bold 4rem/1em var(--ff);
--h2: bold 3rem/1.2em var(--ff);
--h3: bold 2.25rem/1.2em var(--ff);
--h4: bold 1.5rem/1.6em var(--ff);
--p: 1rem/1.6em var(--ff);
--fw: 600;
--logo: 150px;
}
body {
font-family: var(--ff);
margin: 0;
padding: 28px 8%;
box-sizing: border-box;
}
header {
width: 100%; /* ocupa toda a largura da tela */
}
#logo {
height: var(--logo);
cursor: pointer;
}
/* navbar */
#navbar {
width: 100%;
display: flex; /* um elemento ao lado do outro */
align-items: center;
justify-content: space-between;
}
.nav-links {
display: flex;
gap: 80px;
}
.nav-links a {
text-decoration: none;
color: var(--cor-secundaria);
font: var(--p);
font-weight: var(--fw);
position: relative;
}
.nav-links a::after{
content: '';
position: absolute;
width: 0;
height: 3px;
background-color: var(--cor-principal);
left: 0;
bottom: 0;
transition: width 0.3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
.nav-links a.active::after {
width: 100%;
}
.nav-links.active a {
color: var(--cor-principal);
border-bottom: 3px solid var(--cor-principal);
}
/* botões personalizados */
.highlight-links { /* essa class altera o espaçamento apenas entre os dois botões */
display: flex;
gap: 10px;
list-style: none;
}
.nav-btn {
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
padding: 10px 15px;
font-weight: var(--fw);
color: var(--cor-adicional);
background-color: var(--cor-principal);
transition: background-color .3s ease;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.nav-btn:hover {
background-color: #468ce2;
}
/* menu mobile */
.btn {
display: none;
color: var(--cor-secundaria);
}
@media screen and (max-width: 1170px) {
.nav-links,
#navbar .highlight-links {
display: none;
gap: 10px;
}
.btn {
display: block;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
}
@media screen and (max-width: 1170px) {
.nav-links.responsive {position: relative;}
.nav-links.responsive .btn {
position: absolute;
right: 0;
top: 0;
}
.nav-links.responsive a {
float: none;
display: block;
text-align: left;
}
}
function myFunction() {
var x = document.getElementById("navLinks");
if (x.className === "nav-links") {
x.className += "responsive";
} else {
x.className = "nav-links";
}
}
// hover
const navLinks = document.querySelectorAll('.nav-links a');
navLinks.forEach(link => {
link.addEventListener('click', function () {
navLinks.forEach(link => link.classList.remove('active'));
this.classList.add('active');
});
});