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

我一直在努力使我的导航栏具有响应性，我一直在使用W3Schools作为指南尝试实现响应性导航栏，但未能成功，我希望在移动设备上访问我的作品集时显示一个图标，但我无法完成此任务，下面我将链接我使用的w3schools页面、我的代码以及我网站上的一个示例

函数myFunction（）{
var x=document.getElementById（“mynav区域”）；
如果（x.className==“导航区域”）{
x、 类名+=“响应”；
}否则{
x、 className=“导航区域”；
}
}

正文{
保证金：0；
填充：0；
字体系列：影响；
保证金：0；
背景#0F2027；
背景：线性梯度（至底部，#0F2027，#080e10）；
最大宽度：100%；
最大高度：100%；
}
.修理{
明确：两者皆有；
溢出：隐藏；
}
标题{
溢出：隐藏；
高度：100vh；
}
.导航区{
z指数：1；
浮动：对；
高度：70像素；
位置：相对位置；
文本对齐：居中；
宽度：100%；
最高：1%；
}
.菜单区{
浮动：对；
最高：15%；
列表样式：无；
利润率：20px；
}
.菜单区李{
显示：内联块；
边际：0px；
}
.菜单区李a{
文字装饰：无；
颜色：#fff；
填充：0px 20px；
字母间距：2px；
字体系列：无衬线；
}
.菜单区li.active a{
颜色：#FF00BD；
}
.菜单区li a：悬停{
颜色：#FF00BD；
}
.横幅文本{
位置：绝对位置；
文本对齐：居中；
最高：50%；
左：50%；
字体系列：无衬线；
转换：翻译（-50%，-50%）；
}
.横幅文本h2{
颜色：#fff；
字号：80px；
保证金：0；
}
.横幅文本h3{
颜色：#fff；
字体大小：30px；
保证金：0；
}
.横幅文字嗨{
位置：绝对位置；
颜色：#fff；
字号：80px；
宽度：60%；
文本对齐：居中；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字体系列：无衬线；
}
.横幅文本hi h2{
颜色：#fff；
字号：80px；
保证金：0；
}
.条幅文本hi h3{
颜色：#FF00BD；
字体大小：30px；
保证金：0；
}
.条幅文本名称{
z指数：1；
浮动：左；
位置：绝对位置；
颜色：#fff；
宽度：60%；
文本对齐：居中；
最高：3.5%；
右：55%；
字体系列：无衬线；
文字装饰：无；
}
.标题文本名称h2{
颜色：#fff；
字体大小：20px；
保证金：0；
字体系列：无衬线；
文字装饰：无；
}
.横幅文本h2 span{
颜色：#FF00BD；
}
帆布{
显示：块；
高度：100vh；
宽度：100vh；
}
.斯诺{
指针事件：无；
位置：固定；
左：0；
排名：0；
右：0；
底部：0；
最大宽度：100%；
最大高度：100%；
}
.分开{
颜色：白色；
字体系列：无衬线；
身高：100%；
宽度：33.33%；
位置：固定；
排名：0；
溢出x：隐藏；
填充顶部：0px；
}
.左{
左：0；
背景#0F2027；
背景：线性梯度（至底部，#0F2027，#080e10）；
}
.左h2{
颜色：aliceblue；
字体系列：无衬线；
}
.对h2{
颜色：aliceblue；
字体系列：无衬线；
}
.中心{
左：33%；
右：33%；
背景#0F2027；
背景：线性梯度（至底部，#0F2027，#080e10）；
}
.对{
右：0；
背景#0F2027；
背景：线性梯度（至底部，#0F2027，#080e10）；
}
.居中{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}
.img{
宽度：150px；
}
a{
文字装饰：无；
}
.1级，
.2级，
.3级{
宽度：33.33%；
浮动：左；
高度：100px；
颜色：#fff；
字体系列：无衬线；
}
p{
填充顶部：25px；
文本对齐：居中；
}
@进口波旁威士忌；
$col primary:#00c7ec；
$角半径：5px；
.按钮{
z指数：0；
文字装饰：无；
文本转换：大写；
字体系列：“Exo 2”，无衬线；
字体大小：300；
字体大小：30px；
显示：内联块；
位置：相对位置；
文本对齐：居中；
颜色：原色；
边框：1个实心$col主边框；
边界半径：$角半径；
线高：3em；
左：5em；
右侧填充：5em；
长方体阴影：0透明；
@包括过渡（所有0.2秒缓进）；
&：悬停{
颜色：白色；
盒影：0 30px 0透明（$col primary，0.5）；
背景色：原色；
@包括过渡（所有0.2秒缓解）；
&：之前{
@包括动画（发光0.5s 0s线性）；
}
}
&：活动{
长方体阴影：0透明；
@包括过渡（框阴影0.2s缓进）；
}
&：之前{
内容：''；
显示：块；
宽度：0px；
身高：86%；
位置：绝对位置；
最高：7%；
左：0%；
不透明度：0；
背景：白色；
盒影：0 0 15px 3px白色；
@包括变换（斜交（-20度））；
}
}
@包括关键帧（发光）{
从{
不透明度：0；
左：0%；
}
50% {
不透明度：1；
}
到{
不透明度：0；
左：100%；
}
}
@输入“指南针/css3”；
$width:220px；
$height:70px；
$border:4px；
$violet:#6559ae；
$orange:#ff7159；
$deg:120度；
$size:400%；
$dur:3s；
@混合剪辑帧（$width，$height，$border）{
-webkit剪辑路径：多边形（0%100%，$border 100%，$border$border，$width-$border$border，$width-$border$height-$border，$border$height-$border，$border 100%，100%100%，100%0%，0%0%）；
}
.职位{
左边距：自动；
右边距：自动；
文本对齐：居中；
利润率最高：15%；
}
#工作区{
位置：绝对位置；
宽度：100%；
身高：100%；
背景色：#1e1a3e；
字体系列：雷威；
}
#私人的{
颜色：白色；
文字装饰：无；
位置：绝对位置；
底部：15px；
右：2%；
}
/*实际按钮的启动代码：*/
/*   
Spot是位于该窗口内部的跨距
填充父对象并使悬停和链接生效
整个部门
*/
.斑点{
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
}
/*
这是svg本身将使用的外部svg包装器
填满多svg包装器