Example of a fixed navbar, where the menu is created with the HTML <nav> tag|CSS Snippets|W3Docs

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        margin: 0;
        background-color: #f1e9e9;
      }
      .navbar {
        overflow: hidden;
        background-color: #1c87c9;
        position: fixed;
        top: 0;
        width: 100%;
      }
      .navbar a {
        float: left;
        display: block;
        color: #eeeeee;
        text-align: center;
        padding: 15px 18px;
        text-decoration: none;
        font-size: 18px;
      }
      .navbar a:hover {
        color: #ffffff;
      }
      .container {
        padding: 18px;
        margin-top: 35px;
        height: 2000px;
      }
    </style>
  </head>
  <body>
    <nav class="navbar">
      <a href="#books">Books</a>
      <a href="#quizzes">Quizzes</a>
      <a href="#snippets">Snippets</a>
      <a href="#tools">Tools</a>
      <a href="#stringfunctions">String Functions</a>
    </nav>
    <div class="container">
      <h1>
          The navbar stays in place while you are scrolling the web page.
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam ipsum, maximus eu metus ac, semper tristique neque. Suspendisse sed finibus metus, dignissim blandit lorem. Praesent ornare lectus metus, ut aliquet est suscipit et. Quisque sollicitudin, lorem a efficitur euismod, elit elit interdum est, nec vehicula tortor est ut velit. Morbi blandit consequat lectus a auctor. Nulla sed dolor auctor, congue enim vel, blandit mi. Fusce arcu augue, cursus in mollis vitae, porta non magna.
      </p>
      <p>
        Integer condimentum id nisl in lacinia. Ut congue ante sit amet ligula scelerisque, nec gravida erat tempor. Pellentesque venenatis pulvinar aliquam. Sed consectetur dapibus faucibus. Ut volutpat eget turpis sed ultricies. Nunc ut risus sit amet tortor feugiat facilisis sit amet non dolor. Morbi elementum arcu tortor, eu vulputate sapien sollicitudin a.
      </p>
      <p>
        Duis dapibus dui eget est pellentesque, tristique pharetra elit imperdiet. Suspendisse quis quam sed nisi sodales faucibus. Donec quis sodales ex. Etiam molestie est ac ipsum scelerisque, ut bibendum metus molestie. Mauris porttitor ullamcorper faucibus.
      </p>
      <p>
        Integer vulputate venenatis iaculis. Vestibulum fermentum sodales lectus, in posuere lacus interdum eget. Suspendisse maximus, lectus id pellentesque molestie, mi ante placerat est, vel condimentum orci nisl vel lacus. Duis leo diam, viverra nec nulla et, accumsan commodo mauris. Sed id sollicitudin nunc. Praesent aliquet efficitur odio eget imperdiet.
      </p>
      <p>
        Mauris mollis ante a velit molestie elementum. Sed sollicitudin dui diam, laoreet placerat purus laoreet ut. Duis vehicula scelerisque metus, ac interdum massa tempor sit amet. Mauris auctor ante ut turpis vulputate venenatis. Suspendisse luctus condimentum leo vitae auctor. Donec tellus urna, luctus at sollicitudin eu, cursus sit amet tellus. Donec pellentesque blandit consectetur. Ut ac velit ac sem auctor vulputate id in ex. Fusce cursus urna at aliquam sagittis. Proin sagittis risus nisi, eget euismod orci euismod id. Nullam elementum finibus tristique.
      </p>
      <p>
        Nullam sagittis enim id laoreet ullamcorper. Duis nec dictum elit, id sollicitudin enim. Nulla sed tortor in nunc placerat semper sit amet eget justo. Maecenas consectetur ligula in nisi euismod, nec tristique arcu pulvinar. Sed ullamcorper facilisis urna, vitae sollicitudin nisi pretium vitae. Aliquam lacus lacus, auctor non suscipit sit amet, congue sed nisi. Praesent rutrum a leo eget placerat. Nunc ut enim vitae tortor ullamcorper gravida sed vel ex. Nullam sed laoreet mauris. Pellentesque quis interdum arcu. Ut vitae elit non diam congue congue at a nunc. Duis porttitor posuere urna, non tristique urna vehicula malesuada. Vestibulum scelerisque vehicula porttitor. Nam ornare fringilla ultricies. Proin molestie mi id bibendum sagittis.
      </p>
    </div>
  </body>
</html>