Skip to content

Added the automatic active link when scrolled and fixed the testimonial issue #382

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ananta2545 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added the automatic active link when scrolled and fixed the testimonial issue #382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@
</div>
</div>
<ul class="nav__links" id="nav-links">
<li><a href="#header" class="active">HOME</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#trainer">TRAINER</a></li>
<li><a href="#client">CLIENT</a></li>
<li><a href="#blog">BLOG</a></li>
<li><a href="#contact">CONTACT</a></li>
<li><a class="nav_link active" href="#header">HOME</a></li>
<li><a class="nav_link" href="#about">ABOUT</a></li>
<li><a class="nav_link" href="#trainer">TRAINER</a></li>
<li><a class="nav_link" href="#client">CLIENT</a></li>
<li><a class="nav_link" href="#blog">BLOG</a></li>
<li><a class="nav_link" href="#contact">CONTACT</a></li>
<i class="ri-close-line"></i>
</ul>
</div>
Expand Down Expand Up @@ -286,7 +286,7 @@ <h3><sup>$</sup>60<span>/month</span></h3>
<section class="section__container client__container" id="client">
<h2 class="section__header">OUR TESTIMONIALS</h2>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-wrappe">
<div class="swiper-slide">
<div class="client__card">
<img src="assets/client-1.jpg" alt="client" />
Expand Down Expand Up @@ -327,7 +327,7 @@ <h4>Emily Davis</h4>
</div>
</section>

<footer class="footer" id="contact">
<section class="footer" id="contact">
<div class="section__container footer__container">
<div class="footer__col">
<div class="footer__logo">
Expand Down Expand Up @@ -515,7 +515,7 @@ <h2 class="macro__header">Macronutrient Calculator</h2>
<br>
<br>
<br>
<footer class="footer" id="contact">
<footer class="footer">
<div class="section__container footer__container">
<div class="footer__col">
<div class="footer__logo">
Expand Down
37 changes: 36 additions & 1 deletion main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
const menuBtn = document.getElementById("menu-btn");
const navLinks = document.getElementById("nav-links");
const closeIcon = navLinks.querySelector("i.ri-close-line");

const bmiBtn = document.querySelector(".btn");
// Toggle the mobile menu visibility
menuBtn.addEventListener("click", () => {
navLinks.classList.add("open");
Expand Down Expand Up @@ -156,3 +156,38 @@ function sendEmail() {
Body: "And this is the body",
}).then((message) => alert(message));
}

// Navbar active part logic
document.addEventListener("DOMContentLoaded", function() {
const navLinks = document.querySelectorAll('.nav_link');
const sections = document.querySelectorAll('section');

function setActiveLink() {
let currentSection = 'header'; // Default to 'header' (home section)

sections.forEach(section => {
const sectionTop = section.offsetTop - 50; // Adjust offset if needed
const sectionHeight = section.offsetHeight;

// Check if the section is in the viewport
if (window.scrollY >= sectionTop && window.scrollY < sectionTop + sectionHeight) {
currentSection = section.getAttribute('id');
}
});

// Remove 'active' from all links, and set only the active one
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href').includes(currentSection)) {
link.classList.add('active');
}
});
}

// Initially set only the 'HOME' link as active
const homeLink = document.querySelector('#header');
homeLink.classList.add('active');

// Call setActiveLink on scroll
window.addEventListener('scroll', setActiveLink);
});
18 changes: 18 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,24 @@ nav {
gap: 10rem;
}

/* Navbar styling */
/* Style for the navbar links */
.nav_link {
overflow: hidden;
width: 100%;
position: relative;
padding: 0 1rem;
text-decoration: none;
color: var(--text-color);
font-size: 16px;
font-weight: 600;
}

.nav_link.active{
color: red;
}


.header {
background-image: linear-gradient(
to right,
Expand Down