Edit in JSFiddle

<!-- Start Nav Section -->
<nav id="navbar" class="navbar">
  <ul class="nav-menu">
    <li>
      <a data-scroll="home" href="#home" class="dot active">
        <span>Home</span>
      </a>
    </li>
    <li>
      <a data-scroll="one" href="#one" class="dot">
        <span>one</span>
      </a>
    </li>
    <li>
      <a data-scroll="two" href="#two" class="dot">
        <span>two</span>
      </a>
    </li>
    <li>
      <a data-scroll="three" href="#three" class="dot">
        <span>Three</span>
      </a>
    </li>
    <li>
      <a data-scroll="four" href="#four" class="dot">
        <span>Four</span>
      </a>
    </li>
  </ul>
</nav>
<!-- End Nav Section -->
<section id="home"></section>
<section id="one"></section>
<section id="two"></section>
<section id="three"></section>
<section id="four"></section>

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}
/* Start Section Styles */
section {
    width: 100%;
    min-height: 800px;
}

#home {
    background-color: green;
}

#one {
    background-color: blue;
}

#two {
    background-color: yellow;
}

#three {
    background-color: salmon;
}

#four {
    background-color: purple;
}
/* End Section Styles */