Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

How can I highlight position in nav bar for single-page website?

I want to let my users know where they are in my one page website by changing the nav elements of color per part of the website.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>nasa api</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="css/screen.css">
    <link rel="shortcut icon" href="img/NASA_logo.svg.png">
</head>
<body>
    <header id="home">
        <nav>
            <a href="https://www.nasa.gov/" target="_blank"><img id="nasalogo" src="img/NASA_logo.svg.png" alt="nasa logo" width="80" height="80"></a>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#doelgroep">Doelgroep</a></li>
                <li><a href="#data">Data</a></li>
                <li><a href="#foto">Foto</a></li>
                <li><a href="#overmij">Over mij</a></li>
            </ul>
        </nav>
        <img src="img/astronomy-atmosphere-earth-220201.png" alt="header foto" width="100%" height="100%">
    </header>
    <main>
        <div id="doelgroep">
            <h1 class="h1-delen">DOELGROEP</h1>
            <div id="DG-info">
                <div id="DG-text">

                    <p>Logischer wijs heb ik deze site ontworpen voor mensen<br>
                        die geïnteresseerd zijn in het concept ‘space’<br>
                        en alles wat hierbij komt kijken,<br>
                        maar ook voor de alledaagse internetgebruiker<br>
                        die houdt van eens iets anders.</p>
                    <br>
                    <p>Het uit eindelijke besluit is dat dit een website is<br>
                        voor mensen die van space houden en graag meer over weten.<br>
                        Of voor mensen die de dag willen starten<br>
                        met een foto van space of wat data over space.</p>
                </div>
                <img id="img-data" src="img/pexels-photo-373543.jpg" alt="data">
            </div>
        </div>
        <div id="data">
            <h1 class="h1-delen">NASA DATA</h1>
            <div id="grafieken">
                <canvas id="myChart" height="40vh" width="80vw"></canvas>
            </div>
        </div>
        <div id="foto">
            <h1 class="h1-delen">FOTO VAN DE DAG</h1>
            <div class="img-box">
                <div class="side-a"></div>
                <div class="side-b"></div>
            </div>
        </div>
        <div id="overmij">
            <h1 class="h1-delen">OVER MIJ</h1>
            <div id="OM-tekst">
                <div class="OM-p">
                    <p class="OM-titel">Lijnen HTML</p>
                    <p class="OM-tekst">98</p>
                </div>
                <div class="OM-p">
                    <p class="OM-titel">Lijnen CSS</p>
                    <p class="OM-tekst">288</p>
                </div>
                <div class="OM-p">
                    <p class="OM-titel">Lijnen JS</p>
                    <p class="OM-tekst">54</p>
                </div>
                <div class="OM-p">
                    <p class="OM-titel">Redbulls</p>
                    <p class="OM-tekst">13</p>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <img src="img/flight-sky-earth-space.png" alt="racket lansering" width="100%" height="100%">
        <h6 id="madeby">Made by : <a href="http://student.howest.be/conor.vanoystaeyen/portfolio/" target="_blank" id="website-link">Conor Vanoystaeyen</a></h6>
    </footer>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

How can I do this?

1 Answer

Steven Parker
Steven Parker
221,328 Points

You didn't include your CSS or JavaScript code, but that's where you'd accomplish this.

You can create a scroll event handler to check the page position after any movement, and adjust the highlighting by adding and removing the appropriate CSS class for the effect.