Javascript 站点导航栏没有'；不要在较小的屏幕上播放动画

我正在为我的网站制作一个导航栏，这是一个教程。在处理我的移动菜单响应时，我制作了一个

.burger

类，其中有三个条代表较小屏幕的菜单图标。我这样做是为了在775px以上的屏幕上，它的display属性设置为none。我使用媒体查询进行设置，这样当我的站点加载到较小的屏幕上时，它就会显示菜单图标。我使用一些JavaScript添加了一个事件侦听器，用于单击以显示所有链接并播放平滑动画。由于某些原因，当用户单击图标时，站点不会更改

代码：

const导航幻灯片=（）=>{
const burger=document.querySelector（'.burger'）；
const nav=document.querySelector（“#nav”）；
burger.addEventListener（'click'，（）=>{
log（nav.classList.toggle（'nav-active'）；
});
};
导航幻灯片（）
@导入url（'https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap'）；
$text颜色：白烟；
$font stack:'Source Sans Pro'，无衬线；
$nav颜色：rgba（79,91,102,0.8）；
* {
保证金：0；
填充：0；
框大小：边框框；
}
导航{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
最小高度：12vh；
字体系列：$字体堆栈；
背景颜色：$nav颜色；
h1{
字母间距：5px；
字体大小：30px；
颜色：$文本颜色；
}
img{
宽度：64px；
}
保险商实验室{
显示器：flex；
宽度：35%；
证明内容：周围的空间；
a{
字号：21px；
颜色：$文本颜色；
文字装饰：无；
}
李{
列表样式：无；
}
}
.汉堡{
显示：无；
div{
宽度：30px；
高度：4px；
背景颜色：$文本颜色；
保证金：5px；
}
}
}
@介质（最大宽度：1024px）{
导航ul{
宽度：50%；
}
}
@介质（最大宽度：775px）{
身体{
溢出x：隐藏；
}
导航{
保险商实验室{
位置：绝对位置；
右：0px；
高度：88vh；
顶部：12vh；
背景颜色：$nav颜色；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：50%；
转化：translateX（100%）；
过渡：0.5s轻松过渡；
李{
不透明度：0；
}
}
.汉堡{
显示：块；
光标：指针；
}
}
}
.导航激活{
转化：translateX（0%）；
}

家
你好






对css进行以下更改：

改变这个

.nav-active {
  transform: translateX(0%);
}

包含ul

.nav-active ul{
      transform: translateX(0%);
 }


const导航幻灯片=（）=>{
const burger=document.querySelector（'.burger'）；
const nav=document.querySelector（“#nav”）；
burger.addEventListener（'click'，（）=>{
log（nav.classList.toggle（'nav-active'）；
});
};
导航幻灯片（）
@导入url（'https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap'）；
* {
保证金：0；
填充：0；
框大小：边框框；
}
导航{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
最小高度：12vh；
字体系列：“源Sans-Pro”，无衬线；
背景色：rgba（79,91,102,0.8）；
}
导航h1{
字母间距：5px；
字体大小：30px；
颜色：白烟；
}
导航img{
宽度：64px；
}
导航ul{
显示器：flex；
宽度：35%；
证明内容：周围的空间；
}
导航ula{
字号：21px；
颜色：白烟；
文字装饰：无；
}
李国荣{
列表样式：无；
}
导航汉堡{
显示：无；
}
海军汉堡分部{
宽度：30px；
高度：4px；
背景色：白烟；
保证金：5px；
}
@介质（最大宽度：1024px）{
导航ul{
宽度：50%；
}
}
@介质（最大宽度：775px）{
身体{
溢出x：隐藏；
}
导航ul{
位置：绝对位置；
右：0px；
高度：88vh；
顶部：12vh；
背景色：rgba（79,91,102,0.8）；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：50%；
转化：translateX（100%）；
过渡：0.5s轻松过渡；
}
李国荣{
不透明度：0；
}
导航汉堡{
显示：块；
光标：指针；
}
}
.主动导航{
转化：translateX（0%）；
}

家
你好






对css进行以下更改：

改变这个

.nav-active {
  transform: translateX(0%);
}

包含ul

.nav-active ul{
      transform: translateX(0%);
 }


const导航幻灯片=（）=>{
const burger=document.querySelector（'.burger'）；
const nav=document.querySelector（“#nav”）；
burger.addEventListener（'click'，（）=>{
log（nav.classList.toggle（'nav-active'）；
});
};
导航幻灯片（）
@导入url（'https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap'）；
* {
保证金：0；
填充：0；
框大小：边框框；
}
导航{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
最小高度：12vh；
字体系列：“源Sans-Pro”，无衬线；
背景色：rgba（79,91,102,0.8）；
}
导航h1{
字母间距：5px；
字体大小：30px；
颜色：白烟；
}
导航img{
宽度：64px；
}
导航ul{
显示器：flex；
宽度：35%；
证明内容：周围的空间；
}
导航ula{
字号：21px；
颜色：白烟；
文字装饰：无；
}
李国荣{
列表样式：无；
}
导航汉堡{
显示：无；
}
海军汉堡分部{
宽度：30px；
高度：4px；
背景色：白烟；
保证金：5px；
}
@介质（最大宽度：1024px）{
导航ul{
宽度：50%；
}
}
@介质（最大宽度：775px）{
身体{
溢出x：隐藏；
}
导航ul{
位置：绝对位置；
右：0px；
高度：88vh；
顶部：12vh；
背景色：rgba（79,91,102,0.8）；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；