响应式导航栏（移动设备问题）

Question

我一直在努力使导航栏响应，我一直在使用W3Schools作为指导来尝试实现响应式导航栏，但未能成功，我希望出现一个图标，该图标将在访问我的网站时显示我无法完成此任务，下面将链接我使用的w3schools页面，代码以及网站上的外观示例。

https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

Example of how it look on a phone

function myFunction() {
  var x = document.getElementById("mynav-area");
  if (x.className === "nav-area") {
    x.className += " responsive";
  } else {
    x.className = "nav-area";
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: impact;
  margin: 0;
  background: #0F2027;
  background: linear-gradient(to bottom, #0F2027, #080e10);
  max-width: 100%;
  max-height: 100%;
}

.fix {
  clear: both;
  overflow: hidden;
}

header {
  overflow: hidden;
  height: 100vh;
}

.nav-area {
  z-index: 1;
  float: right;
  height: 70px;
  position: relative;
  text-align: center;
  width: 100%;
  top: 1%;
}

.menu-area {
  float: right;
  top: 15%;
  list-style: none;
  margin: 20px;
}

.menu-area li {
  display: inline-block;
  margin: 0px;
}

.menu-area li a {
  text-decoration: none;
  color: #fff;
  padding: 0px 20px;
  letter-spacing: 2px;
  font-family: sans-serif;
}

.menu-area li.active a {
  color: #FF00BD;
}

.menu-area li a:hover {
  color: #FF00BD;
}

.banner-text {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  font-family: sans-serif;
  transform: translate(-50%, -50%);
}

.banner-text h2 {
  color: #fff;
  font-size: 80px;
  margin: 0;
}

.banner-text h3 {
  color: #fff;
  font-size: 30px;
  margin: 0;
}

.banner-text-hi {
  position: absolute;
  color: #fff;
  font-size: 80px;
  width: 60%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: sans-serif;
}

.banner-text-hi h2 {
  color: #fff;
  font-size: 80px;
  margin: 0;
}

.banner-text-hi h3 {
  color: #FF00BD;
  font-size: 30px;
  margin: 0;
}

.banner-text-name {
  z-index: 1;
  float: left;
  position: absolute;
  color: #fff;
  width: 60%;
  text-align: center;
  top: 3.5%;
  right: 55%;
  font-family: sans-serif;
  text-decoration: none;
}

.banner-text-name h2 {
  color: #fff;
  font-size: 20px;
  margin: 0;
  font-family: sans-serif;
  text-decoration: none;
}

.banner-text h2 span {
  color: #FF00BD;
}

canvas {
  display: block;
  height: 100vh;
  width: 100vh;
}

.snow {
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
}

.split {
  color: white;
  font-family: sans-serif;
  height: 100%;
  width: 33.33%;
  position: fixed;
  top: 0;
  overflow-x: hidden;
  padding-top: 0px;
}

.left {
  left: 0;
  background: #0F2027;
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.left h2 {
  color: aliceblue;
  font-family: sans-serif;
}

.right h2 {
  color: aliceblue;
  font-family: sans-serif;
}

.center {
  left: 33%;
  right: 33%;
  background: #0F2027;
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.right {
  right: 0;
  background: #0F2027;
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.centered img {
  width: 150px;
}

a {
  text-decoration: none;
}

.class1,
.class2,
.class3 {
  width: 33.33%;
  float: left;
  height: 100px;
  color: #fff;
  font-family: sans-serif;
}

p {
  padding-top: 25px;
  text-align: center;
}

@import "bourbon";
$col-primary: #00c7ec;
$corner-radius: 5px;
.button {
  z-index: 0;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Exo 2', sans-serif;
  font-weight: 300;
  font-size: 30px;
  display: inline-block;
  position: relative;
  text-align: center;
  color: $col-primary;
  border: 1px solid $col-primary;
  border-radius: $corner-radius;
  line-height: 3em;
  padding-left: 5em;
  padding-right: 5em;
  box-shadow: 0 0 0 0 transparent;
  @include transition(all 0.2s ease-in);
  &:hover {
    color: white;
    box-shadow: 0 0 30px 0 transparentize($col-primary, 0.5);
    background-color: $col-primary;
    @include transition(all 0.2s ease-out);
    &:before {
      @include animation(shine 0.5s 0s linear);
    }
  }
  &:active {
    box-shadow: 0 0 0 0 transparent;
    @include transition(box-shadow 0.2s ease-in);
  }
  &:before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;
    opacity: 0;
    background: white;
    box-shadow: 0 0 15px 3px white;
    @include transform(skewX(-20deg));
  }
}

@include keyframes(shine) {
  from {
    opacity: 0;
    left: 0%;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    left: 100%;
  }
}

@import "compass/css3";
$width : 220px;
$height: 70px;
$border: 4px;
$violet: #6559ae;
$orange: #ff7159;
$deg : 120deg;
$size: 400%;
$dur : 3s;
@mixin clip-frame($width, $height, $border) {
  -webkit-clip-path: polygon(0% 100%, $border 100%, $border $border, $width - $border $border, $width - $border $height - $border, $border $height - $border, $border 100%, 100% 100%, 100% 0%, 0% 0%);
}

.position {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 15%;
}

#workarea {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #1e1a3e;
  font-family: Raleway;
}

#personal {
  color: white;
  text-decoration: none;
  position: absolute;
  bottom: 15px;
  right: 2%;
}


/*    start code for the actual button:         */


/*   
        Spot is the span on the inside of the href that
        fills the parent and makes the hover and link work
        for the entire div
    */

.spot {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}


/*
        This is the outer svg wrapper that the SVG itself will 
        fill. Multiple svg-wrapper classes can be put side by side.
    */

.svg-wrapper {
  margin-top: 0;
  position: relative;
  width: 150px;
  /*make sure to use same height/width as in the html*/
  height: 40px;
  display: inline-block;
  border-radius: 3px;
  margin-left: 5px;
  margin-right: 5px
}


/*
      This is where we define the fill, color, thickness,
      and stroke pattern of the SVG when there is no hover.
      The dasharray and offset together define the line position
      under the words. Here's also where the transition speed is set.
    */

#shape {
  stroke-width: 6px;
  fill: transparent;
  stroke: #FF00BD;
  stroke-dasharray: 85 400;
  stroke-dashoffset: -220;
  transition: 1s all ease;
}


/* 
        Pushing the text up into the SVG. Without this the
        text would be below the div's.
    */

#text {
  margin-top: -35px;
  text-align: center;
}

#text a {
  color: white;
  text-decoration: none;
  font-weight: 100;
  font-size: 1.1em;
}


/* 
        Changing the shape on hover. I change the color of the stroke,
    make it thinner, then set it to again wrap around the entire parent element.
    */

.svg-wrapper:hover #shape {
  stroke-dasharray: 50 0;
  stroke-width: 3px;
  stroke-dashoffset: 0;
  stroke: #FF00BD;
}

@media screen and (max-width: 600px) {
  .nav-area a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 600px) {
  .nav-area.responsive {
    position: relative;
  }
  .nav-area.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .nav-area.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.nav-area .icon {
  display: none;
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Joe's Portfolio</title>
</head>


<body>
  <!-- Navigation Bar -->
  <header class="fix">
    <div class="nav-area">
      <ul class="menu-area">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="work.html">Coursework</a></li>
        <li><a href="future.html">Future Aspirations</a></li>
        <li><a href="about.html">About Me</a></li>
        <li><a href="cvpage.html.html">CV</a></li>
        <li><a href="contact.html">Contact</a></li>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"></i>
        </a>
      </ul>
      <!-- Navigation Bar End -->


      [1]: https://i.stack.imgur.com/v8ErC.png

Answer 1

我已经用您的CSS和HTML更新了响应菜单，请检查，希望对您有所帮助。

function myFunction() {
    var x = document.getElementById("mynav-area");
    if (x.className === "menu-area") {
      x.className += " responsive";
    } else {
      x.className = "menu-area";
    }
  }

body {
        margin: 0;
        padding: 0;
        font-family: impact;
        margin: 0; 
        background: #0F2027; 
        background: linear-gradient(to bottom, #0F2027, #080e10);
        max-width: 100%;
        max-height: 100%;
    }

    .fix {
        clear: both;
        overflow: hidden;
    }

    header {
        overflow: hidden;
        height: 100vh;
    }

    .nav-area {
        z-index: 1;
        float: right;
        height: auto;
        position: relative;
        text-align: center;
        width: 100%;
    }

.menu-area {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

    .menu-area li {
        display: inline-block;
        margin: 0px;
    }

    .menu-area li a, .nav-area a {
        text-decoration: none;
        color: #fff;
        padding: 20px;
        letter-spacing: 2px;
        font-family: sans-serif;
        display: inline-block;
    }

    .menu-area li.active a{
        color: #FF00BD;
    }

    .menu-area li a:hover {
        color: #FF00BD;
    }

    .banner-text {
        position: absolute;
        text-align: center;
        top: 50%;
        left: 50%;
        font-family: sans-serif;
        transform: translate(-50%, -50%);
    }

    .banner-text h2 {
        color: #fff;
        font-size: 80px;
        margin: 0;
    }

    .banner-text h3 {
        color: #fff;
        font-size: 30px;
        margin: 0;
    }   

    .banner-text-hi {
        position: absolute;
        color: #fff;
        font-size: 80px;
        width: 60%;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: sans-serif;
    }

    .banner-text-hi h2 {
        color: #fff;
        font-size: 80px;
        margin: 0;
    }

    .banner-text-hi h3 {
        color: #FF00BD;
        font-size: 30px;
        margin: 0;
    }

    .banner-text-name {
        z-index: 1;
        float: left;
        position: absolute;
        color: #fff;
        width: 60%;
        text-align: center;
        top: 3.5%;
        right: 55%;
        font-family: sans-serif;
        text-decoration: none;
    }

    .banner-text-name h2 {
        color: #fff;
        font-size: 20px;
        margin: 0;
        font-family: sans-serif;
        text-decoration: none;
    }

    .banner-text h2 span {
        color: #FF00BD;
    }

canvas { 
    display: block;
    height: 100vh;
    width: 100vh;
}
.snow { 
    pointer-events: none;
    position:fixed; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    max-width: 100%;
    max-height: 100%;
}

.split {
    color: white;
    font-family: sans-serif;
  height: 100%;
  width: 33.33%;
  position: fixed;
  top: 0;
  overflow-x: hidden;
  padding-top: 0px;
}

.left { 
  left: 0;
  background: #0F2027; 
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.left h2 {
    color: aliceblue;
    font-family: sans-serif;
}

.right h2 {
    color: aliceblue;
    font-family: sans-serif;
}
.center {
  left:33%;
  right:33%;
  background: #0F2027; 
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.right {
  right: 0;
  background: #0F2027; 
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.centered img {
  width: 150px;
}

a {
    text-decoration: none;
}

.class1,
.class2,
.class3 {
  width: 33.33%;
  float: left;
  height: 100px;
  color: #fff;
  font-family: sans-serif;
}

p {
  padding-top: 25px;
  text-align: center;
}


@import "bourbon";

$col-primary: #00c7ec;
$corner-radius: 5px;

.button {
    z-index: 0;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Exo 2', sans-serif;
  font-weight: 300;
  font-size: 30px;

  display: inline-block;
  position: relative;
  text-align: center;
  color: $col-primary;
  border: 1px solid $col-primary;
  border-radius: $corner-radius;

  line-height: 3em;
  padding-left: 5em;
  padding-right: 5em;

  box-shadow: 0 0 0 0 transparent;

  @include transition(all 0.2s ease-in);

  &:hover {
    color: white;
    box-shadow: 0 0 30px 0 transparentize($col-primary, 0.5);
    background-color: $col-primary;

    @include transition(all 0.2s ease-out);

    &:before {
      @include animation(shine 0.5s 0s linear);
    }
  }

  &:active {
    box-shadow: 0 0 0 0 transparent;
    @include transition(box-shadow 0.2s ease-in);
  }

  &:before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;

    opacity: 0;
    background: white;
    box-shadow: 0 0 15px 3px white;
    @include transform(skewX(-20deg));
  }
}

@include keyframes(shine) {
  from {
    opacity: 0;
    left: 0%;
  }

  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    left: 100%;
  }
}

@import "compass/css3";

$width:  220px;
$height: 70px;
$border: 4px;

$violet: #6559ae;
$orange: #ff7159;

$deg:  120deg;
$size: 400%;
$dur:  3s;

@mixin clip-frame($width, $height, $border) {
  -webkit-clip-path: polygon(0% 100%, $border 100%, $border $border, $width - $border $border, $width - $border $height - $border, $border $height - $border, $border 100%, 100% 100%, 100% 0%, 0% 0%);
}


.position {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 15%;
}

#workarea {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #1e1a3e;
  font-family: Raleway;
}

#personal {
  color:white;
  text-decoration:none;
  position:absolute;
  bottom:15px;
  right:2%;
}
/*    start code for the actual button:         */


/*   
    Spot is the span on the inside of the href that
    fills the parent and makes the hover and link work
    for the entire div
*/

.spot {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
/*
    This is the outer svg wrapper that the SVG itself will 
    fill. Multiple svg-wrapper classes can be put side by side.
*/

.svg-wrapper {
  margin-top: 0;
  position: relative;
  width: 150px;
  /*make sure to use same height/width as in the html*/
  height: 40px;
  display: inline-block;
  border-radius: 3px;
  margin-left: 5px;
  margin-right: 5px
}
/*
  This is where we define the fill, color, thickness,
  and stroke pattern of the SVG when there is no hover.
  The dasharray and offset together define the line position
  under the words. Here's also where the transition speed is set.
*/

#shape {
  stroke-width: 6px;
  fill: transparent;
  stroke: #FF00BD;
  stroke-dasharray: 85 400;
  stroke-dashoffset: -220;
  transition: 1s all ease;
}
/* 
    Pushing the text up into the SVG. Without this the
    text would be below the div's.
*/

#text {
  margin-top: -35px;
  text-align: center;
}

#text a {
  color: white;
  text-decoration: none;
  font-weight: 100;
  font-size: 1.1em;
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* 
    Changing the shape on hover. I change the color of the stroke,
make it thinner, then set it to again wrap around the entire parent element.
*/

.svg-wrapper:hover #shape {
  stroke-dasharray: 50 0;
  stroke-width: 3px;
  stroke-dashoffset: 0;
  stroke: #FF00BD;
}
.nav-area .icon {
        display: none;
      }
      @media screen and (max-width: 991px) {
        .nav-area ul li:not(:first-child) {
          display: none;
          background: #212020;
          }
          ul.menu-area.responsive li:first-child {
          background: #212020;
          }
        .nav-area a.icon {
          float: right;
          display: block;
          position: absolute;
          right: 0;
          top: 0;
        }
        .nav-area.responsive {position: relative;}

        ul.menu-area.responsive li {
          display: block;
          background: #3c3a3a;
        }
      }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Navigation Bar -->
<header class="fix">
  <div class="nav-area">
      <ul class="menu-area" id="mynav-area">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="work.html">Coursework</a></li>
          <li><a href="future.html">Future Aspirations</a></li>
          <li><a href="about.html">About Me</a></li>
          <li><a href="cvpage.html.html">CV</a></li>
          <li><a href="contact.html">Contact</a></li>
          <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"></i>
          </a>
      </ul>
        </div>
      </header>

<!-- Navigation Bar End -->

Answer 2

您有未排序的列表，而本教程在<div>中包含锚标记。检查以下更新的代码段。希望这会有所帮助。

编辑 将z-index: 5; position: sticky;添加到类fix中，以使标题位于“关于我”页面中具有position:fixed;的其余内容之上。

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: impact;
  margin: 0;
  background: #0F2027;
  background: linear-gradient(to bottom, #0F2027, #080e10);
  max-width: 100%;
  max-height: 100%;
}

.fix {
  clear: both;
  overflow: hidden;
  z-index: 5;
  position: sticky;
}

header {
  overflow: hidden;
  height: 100vh;
}

.nav-area {
  z-index: 1;
  float: right;
  height: 70px;
  position: relative;
  text-align: center;
  width: 100%;
  top: 1%;
}

.menu-area {
  float: right;
  top: 15%;
  list-style: none;
  margin: 20px;
}

.menu-area li {
  display: inline-block;
  margin: 0px;
}

.menu-area li a {
  text-decoration: none;
  color: #fff;
  padding: 0px 20px;
  letter-spacing: 2px;
  font-family: sans-serif;
}

.menu-area li.active a {
  color: #FF00BD;
}

.menu-area li a:hover {
  color: #FF00BD;
}

.banner-text {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  font-family: sans-serif;
  transform: translate(-50%, -50%);
}

.banner-text h2 {
  color: #fff;
  font-size: 80px;
  margin: 0;
}

.banner-text h3 {
  color: #fff;
  font-size: 30px;
  margin: 0;
}

.banner-text-hi {
  position: absolute;
  color: #fff;
  font-size: 80px;
  width: 60%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: sans-serif;
}

.banner-text-hi h2 {
  color: #fff;
  font-size: 80px;
  margin: 0;
}

.banner-text-hi h3 {
  color: #FF00BD;
  font-size: 30px;
  margin: 0;
}

.banner-text-name {
  z-index: 1;
  float: left;
  position: absolute;
  color: #fff;
  width: 60%;
  text-align: center;
  top: 3.5%;
  right: 55%;
  font-family: sans-serif;
  text-decoration: none;
}

.banner-text-name h2 {
  color: #fff;
  font-size: 20px;
  margin: 0;
  font-family: sans-serif;
  text-decoration: none;
}

.banner-text h2 span {
  color: #FF00BD;
}

canvas {
  display: block;
  height: 100vh;
  width: 100vh;
}

.snow {
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
}

.split {
  color: white;
  font-family: sans-serif;
  height: 100%;
  width: 33.33%;
  position: fixed;
  top: 0;
  overflow-x: hidden;
  padding-top: 0px;
}

.left {
  left: 0;
  background: #0F2027;
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.left h2 {
  color: aliceblue;
  font-family: sans-serif;
}

.right h2 {
  color: aliceblue;
  font-family: sans-serif;
}

.center {
  left: 33%;
  right: 33%;
  background: #0F2027;
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.right {
  right: 0;
  background: #0F2027;
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.centered img {
  width: 150px;
}

a {
  text-decoration: none;
}

.class1,
.class2,
.class3 {
  width: 33.33%;
  float: left;
  height: 100px;
  color: #fff;
  font-family: sans-serif;
}

p {
  padding-top: 25px;
  text-align: center;
}

@import "bourbon";
$col-primary: #00c7ec;
$corner-radius: 5px;
.button {
  z-index: 0;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Exo 2', sans-serif;
  font-weight: 300;
  font-size: 30px;
  display: inline-block;
  position: relative;
  text-align: center;
  color: $col-primary;
  border: 1px solid $col-primary;
  border-radius: $corner-radius;
  line-height: 3em;
  padding-left: 5em;
  padding-right: 5em;
  box-shadow: 0 0 0 0 transparent;
  @include transition(all 0.2s ease-in);
  &:hover {
    color: white;
    box-shadow: 0 0 30px 0 transparentize($col-primary, 0.5);
    background-color: $col-primary;
    @include transition(all 0.2s ease-out);
    &:before {
      @include animation(shine 0.5s 0s linear);
    }
  }
  &:active {
    box-shadow: 0 0 0 0 transparent;
    @include transition(box-shadow 0.2s ease-in);
  }
  &:before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;
    opacity: 0;
    background: white;
    box-shadow: 0 0 15px 3px white;
    @include transform(skewX(-20deg));
  }
}

@include keyframes(shine) {
  from {
    opacity: 0;
    left: 0%;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    left: 100%;
  }
}

@import "compass/css3";
$width: 220px;
$height: 70px;
$border: 4px;
$violet: #6559ae;
$orange: #ff7159;
$deg: 120deg;
$size: 400%;
$dur: 3s;
@mixin clip-frame($width, $height, $border) {
  -webkit-clip-path: polygon(0% 100%, $border 100%, $border $border, $width - $border $border, $width - $border $height - $border, $border $height - $border, $border 100%, 100% 100%, 100% 0%, 0% 0%);
}

.position {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 15%;
}

#workarea {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #1e1a3e;
  font-family: Raleway;
}

#personal {
  color: white;
  text-decoration: none;
  position: absolute;
  bottom: 15px;
  right: 2%;
}


/*    start code for the actual button:         */


/*   
        Spot is the span on the inside of the href that
        fills the parent and makes the hover and link work
        for the entire div
    */

.spot {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}


/*
        This is the outer svg wrapper that the SVG itself will 
        fill. Multiple svg-wrapper classes can be put side by side.
    */

.svg-wrapper {
  margin-top: 0;
  position: relative;
  width: 150px;
  /*make sure to use same height/width as in the html*/
  height: 40px;
  display: inline-block;
  border-radius: 3px;
  margin-left: 5px;
  margin-right: 5px
}


/*
      This is where we define the fill, color, thickness,
      and stroke pattern of the SVG when there is no hover.
      The dasharray and offset together define the line position
      under the words. Here's also where the transition speed is set.
    */

#shape {
  stroke-width: 6px;
  fill: transparent;
  stroke: #FF00BD;
  stroke-dasharray: 85 400;
  stroke-dashoffset: -220;
  transition: 1s all ease;
}


/* 
        Pushing the text up into the SVG. Without this the
        text would be below the div's.
    */

#text {
  margin-top: -35px;
  text-align: center;
}

#text a {
  color: white;
  text-decoration: none;
  font-weight: 100;
  font-size: 1.1em;
}


/* 
        Changing the shape on hover. I change the color of the stroke,
    make it thinner, then set it to again wrap around the entire parent element.
    */

.svg-wrapper:hover #shape {
  stroke-dasharray: 50 0;
  stroke-width: 3px;
  stroke-dashoffset: 0;
  stroke: #FF00BD;
}

@media screen and (max-width: 600px) {
  .nav-area a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Joe's Portfolio</title>
</head>


<body>
  <!-- Navigation Bar -->
  <header class="fix">
    <div class="topnav" id="myTopnav">
      <a href="index.html" class="active">Home</a>
      <a href="work.html">Coursework</a>
      <a href="future.html">Future Aspirations</a>
      <a href="about.html">About Me</a>
      <a href="cvpage.html.html">CV</a>
      <a href="contact.html">Contact</a>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
      </a>
    </div>

  </header>

Answer 3

function myFunction() {
  var x = document.getElementById("mynav-area");
  if (x.className === "nav-area") {
    x.className += " responsive";
  } else {
    x.className = "nav-area";
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: impact;
  margin: 0;
  background: #0F2027;
  background: linear-gradient(to bottom, #0F2027, #080e10);
  max-width: 100%;
  max-height: 100%;
}

.fix {
  clear: both;
  overflow: hidden;
}

header {
  overflow: hidden;
  height: 100vh;
}

.nav-area {
  z-index: 1;
  float: right;
  height: 70px;
  position: relative;
  text-align: center;
  width: 100%;
  top: 1%;
}

.menu-area {
  float: right;
  top: 15%;
  list-style: none;
  margin: 20px;
}

.menu-area li {
  display: inline-block;
  margin: 0px;
}

.menu-area li a {
  text-decoration: none;
  color: #fff;
  padding: 0px 20px;
  letter-spacing: 2px;
  font-family: sans-serif;
}

.menu-area li.active a {
  color: #FF00BD;
}

.menu-area li a:hover {
  color: #FF00BD;
}

.banner-text {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  font-family: sans-serif;
  transform: translate(-50%, -50%);
}

.banner-text h2 {
  color: #fff;
  font-size: 80px;
  margin: 0;
}

.banner-text h3 {
  color: #fff;
  font-size: 30px;
  margin: 0;
}

.banner-text-hi {
  position: absolute;
  color: #fff;
  font-size: 80px;
  width: 60%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: sans-serif;
}

.banner-text-hi h2 {
  color: #fff;
  font-size: 80px;
  margin: 0;
}

.banner-text-hi h3 {
  color: #FF00BD;
  font-size: 30px;
  margin: 0;
}

.banner-text-name {
  z-index: 1;
  float: left;
  position: absolute;
  color: #fff;
  width: 60%;
  text-align: center;
  top: 3.5%;
  right: 55%;
  font-family: sans-serif;
  text-decoration: none;
}

.banner-text-name h2 {
  color: #fff;
  font-size: 20px;
  margin: 0;
  font-family: sans-serif;
  text-decoration: none;
}

.banner-text h2 span {
  color: #FF00BD;
}

canvas {
  display: block;
  height: 100vh;
  width: 100vh;
}

.snow {
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
}

.split {
  color: white;
  font-family: sans-serif;
  height: 100%;
  width: 33.33%;
  position: fixed;
  top: 0;
  overflow-x: hidden;
  padding-top: 0px;
}

.left {
  left: 0;
  background: #0F2027;
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.left h2 {
  color: aliceblue;
  font-family: sans-serif;
}

.right h2 {
  color: aliceblue;
  font-family: sans-serif;
}

.center {
  left: 33%;
  right: 33%;
  background: #0F2027;
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.right {
  right: 0;
  background: #0F2027;
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.centered img {
  width: 150px;
}

a {
  text-decoration: none;
}

.class1,
.class2,
.class3 {
  width: 33.33%;
  float: left;
  height: 100px;
  color: #fff;
  font-family: sans-serif;
}

p {
  padding-top: 25px;
  text-align: center;
}

@import "bourbon";
$col-primary: #00c7ec;
$corner-radius: 5px;
.button {
  z-index: 0;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Exo 2', sans-serif;
  font-weight: 300;
  font-size: 30px;
  display: inline-block;
  position: relative;
  text-align: center;
  color: $col-primary;
  border: 1px solid $col-primary;
  border-radius: $corner-radius;
  line-height: 3em;
  padding-left: 5em;
  padding-right: 5em;
  box-shadow: 0 0 0 0 transparent;
  @include transition(all 0.2s ease-in);
  &:hover {
    color: white;
    box-shadow: 0 0 30px 0 transparentize($col-primary, 0.5);
    background-color: $col-primary;
    @include transition(all 0.2s ease-out);
    &:before {
      @include animation(shine 0.5s 0s linear);
    }
  }
  &:active {
    box-shadow: 0 0 0 0 transparent;
    @include transition(box-shadow 0.2s ease-in);
  }
  &:before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;
    opacity: 0;
    background: white;
    box-shadow: 0 0 15px 3px white;
    @include transform(skewX(-20deg));
  }
}

@include keyframes(shine) {
  from {
    opacity: 0;
    left: 0%;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    left: 100%;
  }
}

@import "compass/css3";
$width : 220px;
$height: 70px;
$border: 4px;
$violet: #6559ae;
$orange: #ff7159;
$deg : 120deg;
$size: 400%;
$dur : 3s;
@mixin clip-frame($width, $height, $border) {
  -webkit-clip-path: polygon(0% 100%, $border 100%, $border $border, $width - $border $border, $width - $border $height - $border, $border $height - $border, $border 100%, 100% 100%, 100% 0%, 0% 0%);
}

.position {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 15%;
}

#workarea {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #1e1a3e;
  font-family: Raleway;
}

#personal {
  color: white;
  text-decoration: none;
  position: absolute;
  bottom: 15px;
  right: 2%;
}


/*    start code for the actual button:         */


/*   
        Spot is the span on the inside of the href that
        fills the parent and makes the hover and link work
        for the entire div
    */

.spot {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}


/*
        This is the outer svg wrapper that the SVG itself will 
        fill. Multiple svg-wrapper classes can be put side by side.
    */

.svg-wrapper {
  margin-top: 0;
  position: relative;
  width: 150px;
  /*make sure to use same height/width as in the html*/
  height: 40px;
  display: inline-block;
  border-radius: 3px;
  margin-left: 5px;
  margin-right: 5px
}


/*
      This is where we define the fill, color, thickness,
      and stroke pattern of the SVG when there is no hover.
      The dasharray and offset together define the line position
      under the words. Here's also where the transition speed is set.
    */

#shape {
  stroke-width: 6px;
  fill: transparent;
  stroke: #FF00BD;
  stroke-dasharray: 85 400;
  stroke-dashoffset: -220;
  transition: 1s all ease;
}


/* 
        Pushing the text up into the SVG. Without this the
        text would be below the div's.
    */

#text {
  margin-top: -35px;
  text-align: center;
}

#text a {
  color: white;
  text-decoration: none;
  font-weight: 100;
  font-size: 1.1em;
}


/* 
        Changing the shape on hover. I change the color of the stroke,
    make it thinner, then set it to again wrap around the entire parent element.
    */

.svg-wrapper:hover #shape {
  stroke-dasharray: 50 0;
  stroke-width: 3px;
  stroke-dashoffset: 0;
  stroke: #FF00BD;
}

@media screen and (max-width: 600px) {
  .nav-area a:not(:first-child) {
    display: none;
  }
  .nav-area a.icon {
    float: right;
    display: block;
  }
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 600px) {
  .nav-area.responsive {
    position: relative;
  }
  .nav-area.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .nav-area.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.nav-area .icon {
  display: none;
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Joe's Portfolio</title>
</head>


<body>
  <!-- Navigation Bar -->
  <header class="fix">
  <div class="nav-area">
    <ul class="menu-area" id="mynav-area">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="work.html">Coursework</a></li>
          <li><a href="future.html">Future Aspirations</a></li>
          <li><a href="about.html">About Me</a></li>
          <li><a href="cvpage.html.html">CV</a></li>
          <li><a href="contact.html">Contact</a></li>
          <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"></i>
        </a>
      </ul>
      <!-- Navigation Bar End -->