Anchor link text position

Hi, everyone. How do I specify the screen position of the text that I’m linking my navigation bar to? I want there to be some space between the top of the page and the text.

Hi. Can you share your code, its easier working with it.

html {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 10px;
    line-height: 1.5;
}

main {
    font-size: 1.5rem;
    width: 50vw;
    margin: 20px auto;
}

nav {
    font-size: 2rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 20vw;
    height: 100%;
    padding: 20px 0;
    /* border-right: solid; */
}

nav ul, nav header {
    position: absolute;
    right: 20px;
    list-style: none;
}

/* trying to add top margin to linked text */
/* 
nav [class] {
    margin-top: 20px;
} */

The HTML code as well.

It got hidden for moderation, I’ll try again:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lorem Ipsum</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <nav id="navbar">
        <header>Lorem Ipsum</header>
        <ul>
            <li>
                <a href="#Section_1" class="nav-link">Section 1</a>
            </li>
            <li>
                <a href="#Section_2" class="nav-link">Section 2</a>
            </li>
            <li>
                <a href="#Section_3" class="nav-link">Section 3</a>
            </li>
            <li>
                <a href="#Section_4" class="nav-link">Section 4</a>
            </li>
            <li>
                <a href="#Section_5" class="nav-link">Section 5</a>
            </li>
        </ul>
    </nav>
    <main id="main-doc">
        <section class="main-section" id="Section_1">
            <header>Section 1</header>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur facilisis ligula imperdiet
                    faucibus euismod. Quisque vel est ut arcu laoreet hendrerit id quis est. In eget purus in massa
                    varius aliquet. Nulla nibh enim, facilisis sed semper vel, bibendum et nibh. Morbi blandit velit at
                    magna aliquam, id dignissim turpis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing
                    elit. Curabitur sed commodo purus, at blandit turpis. Sed semper ac nisi nec efficitur. Nam ut
                    malesuada sem, ullamcorper tristique nisl. Morbi vulputate consectetur ipsum.</p>
                <p>Maecenas fermentum scelerisque viverra. Sed eleifend fringilla ornare. Integer auctor egestas
                    laoreet. Quisque gravida tempor congue. Praesent et tristique ligula, eu faucibus magna. Etiam vitae
                    lorem imperdiet, laoreet nisi in, accumsan orci. Nunc tincidunt ut erat ut lobortis. Curabitur
                    venenatis nulla et magna bibendum, quis ornare est aliquam. Fusce ullamcorper convallis lectus non
                    fermentum. Nam consequat est non odio tempor, eget malesuada massa rhoncus. Pellentesque suscipit
                    ante rutrum felis egestas, quis tristique est volutpat. Quisque scelerisque vulputate gravida. Ut
                    nec mi sagittis, sagittis erat id, porttitor lorem. Donec gravida dolor sed commodo scelerisque.
                    Etiam eu suscipit elit.
                    <code>mandatory</code>
                </p>
        </section>
        <section class="main-section" id="Section_2">
            <header>Section 2</header>
                <p>Ut sagittis erat nisl, euismod porta ex sagittis non. Integer nibh neque, sollicitudin nec magna at,
                    maximus imperdiet dolor. Sed eu placerat enim, non congue quam. Donec eu ante ac libero consectetur
                    consectetur. Duis at lorem ac nunc vestibulum pulvinar mollis vel elit. Nunc eu leo sit amet urna
                    fringilla venenatis vel sit amet ipsum. Praesent consectetur ex eu tellus fringilla, malesuada
                    laoreet augue auctor. Nam iaculis quam quis ex volutpat convallis. Vestibulum in hendrerit odio.
                    Vivamus ultrices elementum est eget condimentum. Curabitur suscipit mauris ut nulla sagittis, a
                    vestibulum sem scelerisque. Pellentesque ultricies purus congue, rhoncus lectus quis, mollis magna.
                    Sed lorem ex, mattis ut cursus eu, eleifend eu urna.</p>
                <p>Fusce pellentesque dapibus ullamcorper. Mauris aliquam consequat lectus, eu posuere purus iaculis sit
                    amet. Mauris rhoncus justo rutrum finibus scelerisque. Aliquam erat volutpat. Aliquam lacinia, dui
                    vel volutpat ornare, urna lacus eleifend ante, et ullamcorper velit justo nec diam. Mauris iaculis
                    tristique suscipit. Vestibulum malesuada congue tempor. Quisque tincidunt eget urna vel tincidunt.
                    Nam ipsum erat, aliquet at venenatis in, ultricies id sem. Nullam pulvinar dolor at purus ornare
                    finibus. Morbi venenatis cursus venenatis. Sed ultrices ex nec nisl ornare, at eleifend lectus
                    semper. Praesent malesuada vehicula felis. Pellentesque convallis risus elit, quis maximus lacus
                    egestas ac. In non auctor tellus. Orci varius natoque penatibus et magnis dis parturient montes,
                    nascetur ridiculus mus.
                    <code>mandatory</code>
                </p>
        </section>
        <section class="main-section" id="Section_3">
            <header>Section 3</header>
                <p>Pellentesque molestie, dui vel euismod auctor, nisl lectus fringilla nisi, nec blandit nulla ipsum
                    vel turpis. Phasellus ut tellus sed nulla fermentum tempor. Maecenas vehicula, orci id placerat
                    auctor, diam velit volutpat risus, pretium imperdiet justo mauris non nisl. Donec dictum rutrum
                    metus, eleifend ullamcorper tellus. Praesent tristique non augue eget lacinia. Nullam venenatis
                    laoreet leo vitae condimentum. Duis sed pulvinar libero. Vestibulum pellentesque eleifend laoreet.
                    Vestibulum cursus erat et augue bibendum lacinia. Aliquam erat volutpat. Nam at elit quis odio
                    fermentum efficitur et a ligula.</p>
                <p>Nam cursus tellus non ultrices malesuada. Sed euismod velit vitae consequat suscipit. Donec placerat
                    augue pretium quam aliquam eleifend eget et neque. Pellentesque tristique pulvinar est, ut laoreet
                    justo. Maecenas tristique tincidunt velit quis tempor. Duis nec ante in ex feugiat ultrices.
                    Praesent bibendum lorem orci, lobortis rhoncus orci efficitur quis. Pellentesque lorem neque,
                    gravida vitae diam non, vestibulum suscipit eros. Curabitur finibus eleifend nibh nec maximus. Ut
                    vitae mi commodo, fermentum odio at, eleifend metus.
                    <code>mandatory</code>
                </p>
        </section>
        <section class="main-section" id="Section_4">
            <header>Section 4</header>
                <p>Nulla facilisi. Morbi ac augue et massa pellentesque pharetra. Suspendisse mattis, est vel cursus
                    hendrerit, justo nisi lobortis nunc, eget fermentum est eros quis orci. Morbi imperdiet et velit
                    vitae pellentesque. Aliquam vitae leo viverra, tincidunt orci vitae, vulputate tortor. Duis eget
                    ante sollicitudin, gravida diam id, faucibus ipsum. Aliquam tincidunt tincidunt condimentum.
                    Vestibulum viverra lobortis augue, fringilla ornare sapien fermentum at.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget porta metus, sed molestie orci.
                    Fusce posuere diam in tortor imperdiet ullamcorper. Vestibulum quis sapien finibus, rhoncus purus
                    in, dapibus metus. Aliquam est eros, semper eget urna in, lacinia porttitor velit. Nullam nec
                    gravida lectus, eu convallis libero. Nunc vehicula ante sed hendrerit dictum. Praesent magna quam,
                    tempor in cursus et, tempus mattis nisl. Cras finibus magna non ornare suscipit. Aenean semper nunc
                    quis mollis pretium. Quisque varius mi luctus pulvinar consectetur.
                    <code>mandatory</code>
                </p>
        </section>
        <section class="main-section" id="Section_5">
            <header>Section 5</header>
                <p>Fusce porttitor dui quam, a maximus mauris bibendum vitae. Nunc eu elit purus. In hac habitasse
                    platea dictumst. Integer sit amet ex eget justo faucibus venenatis. Mauris tincidunt gravida eros,
                    sed ullamcorper sem sollicitudin vitae. Fusce porta elit sed quam lacinia lacinia. Vivamus turpis
                    sem, commodo non sem eu, iaculis hendrerit nisi. Fusce fermentum aliquam lorem ac dictum.
                    Suspendisse felis magna, vehicula id efficitur et, faucibus in tortor. Mauris ut dolor at mauris
                    sollicitudin pharetra.</p>
                <p>Curabitur venenatis viverra risus iaculis tincidunt. Donec feugiat lorem enim, ac ullamcorper nisi
                    feugiat et. Aenean consectetur consectetur facilisis. Donec lacinia lectus eget mi congue, accumsan
                    sagittis enim feugiat. Ut dictum faucibus lacus, et feugiat libero euismod ut. Mauris luctus gravida
                    nisi eget euismod. Praesent scelerisque lectus mollis lectus elementum fermentum. Quisque porttitor
                    euismod ultrices. Pellentesque sit amet dignissim nisi, a vulputate nisi. Nulla placerat dapibus
                    neque, nec porttitor justo congue et. Morbi vitae tristique ante. Vestibulum id ullamcorper elit, ac
                    fermentum ipsum.
                    <code>mandatory</code>
                </p>
        </section>
    </main>
</body>

</html>

Double posting usually convinces the automated filters you are a spammer. I’d wait for a moderator to release the post from the queue instead.

Let me know if this is what you want.

No, that doesn’t do it :slightly_smiling_face:

A bit of clarity would help.

I’ll try to rephrase. After clicking a link in my navigation list, I want the position – to which the link brings the text on the page – to be some space below the top of the page, rather than at the very top.