Description
- You have 4 Navigation items: home, portfolio, about, contact
-
And 4 sections on the page.
-
You want: when users scroll to home >> underline “home” item. When users scroll to portfolio section >> underline portfolio. Similar with about, contact
#1. First, find Navigation Item URL.
In my example, we have
-
home: /
-
portfolio: # portfolio
-
about: #about
-
contact: #contact
#2. Next, edit 4 Sections on the page > Add Code Block > Paste these syntax.
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>
#3. Use this code to Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add id for first section
$('.page-section').first().attr('id', 'home-section');
// For about and contact sections, find section contains code block
let aboutSection = $('#about').closest('.page-section');
let contactSection = $('#contact').closest('.page-section');
let portfolioSection = $('#portfolio').closest('.page-section');
// Add IDs
aboutSection.attr('id', 'about-section');
contactSection.attr('id', 'contact-section');
portfolioSection.attr('id', 'portfolio-section');
$(window).on('scroll', function() {
let scrollPos = $(window).scrollTop();
let viewportHeight = $(window).height();
// First section is home
let homeSection = $('.page-section').first();
let homeSectionTop = homeSection.offset().top;
let homeSectionBottom = homeSectionTop + homeSection.height();
// Check each section
if(scrollPos >= homeSectionTop && scrollPos < homeSectionBottom) {
$('.header-announcement-bar-wrapper').attr('id', 'home');
}
if(portfolioSection.length) {
let sectionTop = portfolioSection.offset().top;
let sectionBottom = sectionTop + portfolioSection.height();
if(scrollPos >= sectionTop && scrollPos < sectionBottom) {
$('.header-announcement-bar-wrapper').attr('id', 'portfolio');
}
}
if(aboutSection.length) {
let sectionTop = aboutSection.offset().top;
let sectionBottom = sectionTop + aboutSection.height();
if(scrollPos >= sectionTop && scrollPos < sectionBottom) {
$('.header-announcement-bar-wrapper').attr('id', 'about');
}
}
if(contactSection.length) {
let sectionTop = contactSection.offset().top;
let sectionBottom = sectionTop + contactSection.height();
if(scrollPos >= sectionTop && scrollPos < sectionBottom) {
$('.header-announcement-bar-wrapper').attr('id', 'contact');
}
}
});
});
</script>
Remember to replace Navigation Item URL.
#4. Use this code to Custom CSS.
div.header-nav-item:nth-child(1)>a {
background-image: none !important;
}
div#home [href="/"] {
background-image: linear-gradient(currentColor, currentColor) !important;
background-repeat: repeat-x;
background-size: 1px 1px;
background-position: 0 100%;
background-position: 0 calc(100% - 0.1em);
}
div#portfolio [href*="#portfolio"] {
background-image: linear-gradient(currentColor, currentColor);
background-repeat: repeat-x;
background-size: 1px 1px;
background-position: 0 100%;
background-position: 0 calc(100% - 0.1em);
}
div#about [href*="#about"] {
background-image: linear-gradient(currentColor, currentColor);
background-repeat: repeat-x;
background-size: 1px 1px;
background-position: 0 100%;
background-position: 0 calc(100% - 0.1em);
}
div#contact [href*="#contact"] {
background-image: linear-gradient(currentColor, currentColor);
background-repeat: repeat-x;
background-size: 1px 1px;
background-position: 0 100%;
background-position: 0 calc(100% - 0.1em);
}
Remember to replace ID, URL in the code.
