Навигация О, Опыт, и т. Д. c. разделы

Question

<header>
    <div class="menu-toggler">
        <div class="bar half start"></div>
        <div class="bar half"></div>
        <div class="bar half end"></div>
    </div>
    <nav class="top-nav" role='navigation'> 
        <ul class="nav-list">
            <li>
                <a href="index.html" class="nav-link">Home</a>
            </li>
            <li>
                <a href="#about" class="nav-link">About</a>
            </li>
            <li>
                <a href="#services" class="nav-link">Services</a>
            </li>
            <li>
                <a href="#portfolio" class="nav-link">Portfolio</a>
            </li>
            <li>
                <a href="#experience" class="nav-link">Experience</a>
            </li>
            <li>
                <a href="#contact" class="nav-link">Contact</a>
            </li>
        </ul>
    </nav>
    <div class="landing-text">
        <h1>Ali Temel</h1>
        <h6>Junior Front-End Developer</h6>
    </div>
</header>

Уважаемые пользователи Stackoverflow,

Это мой самый первый вопрос. Я предполагаемый веб-разработчик. Я действительно пытался связать свои разделы, но не могу перейти в раздел, когда нажимаю «Опыт» или «О разделе». Я ценю за вашу помощь. Это потрясающее сообщество. Теперь я могу получить шанс зарегистрироваться.

https://github.com/alitemel89/personalwebsite-v1

С уважением,

Али

Answer 1

Чтобы якорные ссылки работали, структура должна быть такой:

<a href="#about">About</a>

<div id="about">About content</div>

Проверьте это для более причудливых вещей, связанных с этим. https://css-tricks.com/hash-tag-links-padding/

Answer 2

Я взглянул на твой код. Проблема в том, что экран меню не go. Например, когда вы нажимаете кнопку #about, вы переходите в раздел about, но проблема в том, что ваш оверлей не исчезает go.

-Вы должны сделать это, поэтому при щелчке оверлей исчезает.

-Ваш синтаксис для движущихся секций хорош, нет необходимости изменять это