I have in my navbar an anchor tag that says translate and I should go to englis.html
but it doesn't work and I don't know if maybe the styles are covering this 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>
I better write the answer. What happens is that in the javascript you are using a preventDefault in the link tags. That prevents the default behavior from running, which is what you're trying to use.
The problem is not the style, that depends on what level your "englis.html" page is at if it is at the same level as the page that loads this code
It should work without problem using :
If you are outside on a previous level:
uses