Javascript 无法为移动设备设置水平导航栏？

我希望我的导航栏在移动视图的顶部水平，但我无法获得并排的链接。如何实现这一点

基本上在桌面视图中，它的工作完全垂直于左侧

但在移动视图中，我希望它与图标并排出现在顶部，而没有任何徽标。如何实现这一点

var words=document.getElementsByClassName（'word'）；
var wordArray=[]；
var-currentWord=0；
for（var i=0；i

：根目录{
--主色：#fff；
}
身体{
背景色：#252627；
边际：0px；
宽度：100%；
身高：100%；
溢出：隐藏；
}
.第页{
宽度：100%；
身高：100%；
位置：绝对位置；
}
.BG标志{
位置：绝对位置；
最高：20%；
右：15vh；
高度：65vh；
宽度：65vh；
z指数：99；
}
.主页{
宽度：100%；
将改变：内容；
身高：90%；
最小高度：566px；
位置：绝对位置；
不透明度：1；
最高：5%；
保证金：0自动；
z指数：0；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
变换样式：保留-3d；
}
路径{
填充：#252627；
行程：#00ffdc；
动画：my_动画2线性向前，填充。2线性2向前；
笔划数组：400；/*需要*/
笔划偏移量：400；/*…匹配*/
}
@为my_动画设置关键帧{
到{stroke dashoffset:0}
}
@关键帧填充{
至{fill:#ff0046}
}
@导入url(https://fonts.googleapis.com/css?family=Open+Sans:600）；
.bglogo路径：悬停{
冲程：#fff；
}
身体{
字体系列：“开放式Sans”，无衬线；
字号：600；
字体大小：40px；
}
.文本{
位置：绝对位置；
左：10%；
最高：40%；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
宽度：40%；
最高高度：90%；
}
p{
显示：内联块；
垂直对齐：顶部；
保证金：0；
颜色：白色；
字体大小：64px；
}
.字{
位置：绝对位置；
宽度：100%；
不透明度：0；
空白：nowrap；
}
.信{
显示：内联块；
位置：相对位置；
浮动：左；
变换：translateZ（25px）；
变换原点：50%50%25px；
}
.写信出去{
变换：rotateX（90度）；
变换：变换0.32s三次贝塞尔（0.55,0.055,0.675,0.19）；
}
.信后面{
变换：rotateX（-90度）；
}
.信{
变换：旋转（0度）；
变换：变换0.38s三次贝塞尔（0.175,0.885,0.32,1.275）；
}
紫藤{
颜色：#8e44ad；
}
伯利兹先生{
颜色：#2980b9；
}
.石榴{
颜色：#c0392b；
}
格林先生{
颜色：#16a085；
}
.午夜{
颜色：#003366；
}
p{
颜色：var（--mainColor）；
文字装饰：无；
}
p:悬停{
颜色：透明；
-webkit文本笔划：2px var（--mainColor）；
}
@不支持（-webkit文本笔划：2px红色）{
p:悬停{
文本阴影：
3px 3px 0变量（--mainColor），
-1px-1px 0变量（--mainColor），
1px-1px 0变量（--mainColor），
-1px 1px 0变量（--mainColor），
1px 1px 0变量（--mainColor）；
}
}
.顶部标签{
底部：自动；
顶部：0px；
}
.标签{
颜色：#515152；
位置：绝对位置；
底部：0px；
左：80px；
字号：18px；
字体系列：“LaBelleAurore”，草书；
}
.主页#演示：：之前{
内容：''；
字体系列：“LaBelleAurore”，草书；
颜色：#515152；
字号：18px；
位置：绝对位置；
利润上限：-35px；
}
.home page.word:：after{
内容：''；
字体系列：“LaBelleAurore”，草书；
颜色：#515152；
字号：18px；
位置：绝对位置；
边缘顶部：18px；
左边距：20px；
-webkit动画：myanim2 1s 1.7s向后；
动画：myanim2 1s 1.7s向后；
}
noselect先生{
-webkit触摸标注：无；/*iOS Safari*/
-webkit用户选择：无；/*Safari*/
-khtml用户选择：无；/*Konquer或HTML*/
-moz用户选择：无；/*Firefox*/
-ms用户选择：无；/*Internet Explorer/Edge*/
用户选择：无；/*无前缀版本，当前
由Chrome和Opera支持*/
}
@关键帧myanim2{
0%{不透明度：0；}
100%{不透明度：1；}
}
@-webkit关键帧myanim2{
0%{不透明度：0；}
100%{不透明度：1；}
}
#导航条{
背景：#181818；
宽度：60px；
身高：100%；
位置：绝对位置；
排名：0；
z指数：3；
最小高度：500px；
}
#导航条导航{
显示