Reputation: 97

Responsive Navigation Bar (Mobile device issue)

I have been working on trying to make my navigation bar responsive, I have been using W3Schools as a guide to try and achieve a responsive navbar but was unable to succeed, I would like an icon to appear which will show when visiting my portfolio on a mobile device but I am unable to complete this task, below I will link the w3schools page I used, my code and an example of what it looks like on my website.

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.sstatic.net/v8ErC.png

Upvotes: 0

Answers (3)

Nik

Reputation: 1709

You had un-ordered list whereas the tutorial has anchor tags inside a <div>. Check following updated code snippet. Hope this helps.

EDIT Added z-index: 5; position: sticky; to the class fix, in order to bring header above rest of the content having position:fixed; in "About me" page.

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>

Upvotes: 0

theoharis Constantin

Reputation: 11

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 -->

Upvotes: 0

Mohit Gupta

Reputation: 739

I have Updated responsive menu with your css and your html, check that, I hope this will help you.

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 -->

Upvotes: 1

Responsive Navigation Bar (Mobile device issue)

Answers (3)

Related Questions