Kevin Powell - Community•3w ago

links to sections in the same page

i want to link my navbar to sections in the same page and when that sections comes into the viewport ,the list element linked to that section should have a change in color, how do i do this using css?

      <nav class="navbar">
            <ul>
                  <li><a href="#">HOME</a></li>
                  <li><a href="#browse-topics">BROWSE TOPICS</a></li>
                  <li><a href="#how-it-works">HOW IT WORKS</a></li>
                  <li><a href="#faqs">FAQS</a></li>
                  <li><a href="#contact">CONTACT</a></li>
                  <li><a href="#pages">PAGES</a></li>
            </ul>
      </nav>

      <nav class="navbar">
            <ul>
                  <li><a href="#">HOME</a></li>
                  <li><a href="#browse-topics">BROWSE TOPICS</a></li>
                  <li><a href="#how-it-works">HOW IT WORKS</a></li>
                  <li><a href="#faqs">FAQS</a></li>
                  <li><a href="#contact">CONTACT</a></li>
                  <li><a href="#pages">PAGES</a></li>
            </ul>
      </nav>

5 Replies

ἔρως•3w ago

almost what's your css stack? it's possible to do something like this:

body:has(#browse-topics:target) nav a[href="#browse-topics"] {
  color: yellow;
}

body:has(#browse-topics:target) nav a[href="#browse-topics"] {
  color: yellow;
}

but the "home" won't work unless you put an actual link, like this it also won't work on scroll it will only work on click https://jsfiddle.net/wtjq9fd3/ <-- here's an example if you use sass, it can be made a lot better

MarkBoots•3w ago

i think OP also wants an intersection observer to highlight the corresponsing menu item when scrolling through the sections

ἔρως•3w ago

yes, that would be a much better solution but this specifically states css and html, not js and with css, this might be the best possible

MarkBoots•3w ago

yea, i know. but reading the question i think OP want's that (which isn't possible with css alone) but i might be wrong

ἔρως•3w ago

as far as i know, it's impossible with css only unless someone made some magic voodoo for that

Gaming

Programming

links to sections in the same page