tengo en mi navbar un anchor tag que dice translate y deberia ir a englis.html
pero no funciona y no se si tal vez los estilos esten tapando este anchor tag...
const navbarToggler = document.querySelector(".toggle__button");
const navbarMenu = document.querySelector(".navbar ul");
const navbarLinks = document.querySelectorAll(".navbar a");
navbarToggler.addEventListener("click", navbarTogglerClick);
function navbarTogglerClick() {
navbarToggler.classList.toggle("open-navbar-toggler");
navbarMenu.classList.toggle("open");
}
for (let i = 0; i < navbarLinks.length; i++) {
navbarLinks[i].addEventListener("click", navbarLinkClick);
}
function navbarLinkClick(event) {
smoothScroll(event); // Call the "smoothScroll" function
if (navbarMenu.classList.contains("open")) {
// Close navbarMenu in smaller screens
navbarToggler.click();
}
}
function smoothScroll(event) {
event.preventDefault();
const targetId =
event.currentTarget.getAttribute("href") === "#"
? "header"
: event.currentTarget.getAttribute("href");
const targetPosition = document.querySelector(targetId).offsetTop;
const startPosition = window.pageYOffset;
const distance = targetPosition - startPosition;
const duration = 1000;
let start = null;
window.requestAnimationFrame(step);
function step(timestamp) {
if (!start) start = timestamp;
const progress = timestamp - start;
// window.scrollTo(0, distance*(progress/duration) + startPosition);
window.scrollTo(
0,
easeInOutCubic(progress, startPosition, distance, duration)
);
if (progress < duration) window.requestAnimationFrame(step);
}
}
// Easing Functions
function linear(t, b, c, d) {
return (c * t) / d + b;
}
function easeInOutQuad(t, b, c, d) {
t /= d / 2;
if (t < 1) return (c / 2) * t * t + b;
t--;
return (-c / 2) * (t * (t - 2) - 1) + b;
}
function easeInOutCubic(t, b, c, d) {
t /= d / 2;
if (t < 1) return (c / 2) * t * t * t + b;
t -= 2;
return (c / 2) * (t * t * t + 2) + b;
}
/*----------------- NAVBAR ------------------*/
.navbar {
font-size: 1.4rem;
height: 7.5rem;
background-color: #fff;
border-bottom: 1px solid var(--grey-light-2);
display: flex;
justify-content: space-evenly;
align-items: center;
color: var(--grey-dark-2);
box-shadow: 0 -1rem 3rem rgba(0, 0, 0, 0.2);
max-width: 100%;
width: 100%;
position: fixed;
z-index: 2;
font-family: "Lato Bold";
text-transform: uppercase;
}
.toggle__checkbox {
display: none;
visibility: hidden;
}
@media only screen and (min-width: 56.25em) /* 900px */ {
.navbar-list {
display: flex;
align-items: center;
align-self: stretch;
}
.navbar-list > * {
padding: 0 2rem;
cursor: pointer;
height: 100%;
display: flex;
align-items: center;
transition: all 0.5s;
}
.separator {
display: block;
width: 0.2rem;
height: 4.5rem;
background: var(--grey-light-2);
padding: 0;
margin: 0 -0.2rem;
}
.navbar__item:hover:not(:last-child) {
background-color: var(--grey-light-2);
position: relative;
z-index: 5;
}
.navbar__link:link,
.navbar__link:visited {
color: var(--grey-dark-2);
text-decoration: none;
display: flex;
align-items: center;
position: relative;
z-index: 10;
}
.navbar__item:not(:last-child) .navbar__link i {
margin-right: 0.5rem;
}
#big-icon {
font-size: 4rem;
z-index: 20;
}
.navbar__link i {
font-size: 2rem;
}
.navbar__item:last-child {
position: relative;
}
.navbar__item:last-child:hover::before {
content: "";
width: 6rem;
height: 6rem;
background-color: var(--grey-light-2);
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.toggle {
display: none;
}
.notification {
font-size: 1rem;
height: 2rem;
width: 2rem;
border-radius: 100%;
background-color: var(--color-red);
color: #fff;
position: absolute;
top: -0.5rem;
right: -0.5rem;
display: flex;
justify-content: center;
align-items: center;
z-index: 30;
}
}
<nav class="navbar">
<ul class="navbar-list">
<li class="navbar__item">
<a class="navbar__link" href="#sobre-mi">
<i class="fas fa-address-book"></i>Sobre mi
</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#habilidades">
<i class="fas fa-th"></i>Habilidades
</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="english.html">
<i class="fas fa-globe-americas"></i>Translation
</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#proyectos">
<i class="fas fa-archive"></i>Portafolio
</a>
</li>
<div class="separator"> </div>
<li class="navbar__item">
<a class="navbar__link" href="#certificados">
<i class="fas fa-award" id="big-icon"></i>
<span class="notification">7</span>
</a>
</li>
</ul>
</nav>