Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Conor Vanoystaeyen
Conor Vanoystaeyen
16,687 Points

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
229,732 Points
Steven Parker
Steven Parker
229,732 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.