Javascript 使用topnav和事件监听器调整桌面显示以实现响应式站点导航

我几乎一整天都在做这个。我快到了。只是需要我不知道如何实现的收尾工作

我的导航应该如下所示： 这是桌面版本的外观：

body，html{
最大宽度：100%；
填充：0vw；
利润率：0vw；
}
.标题{
背景色：#ffffff；
位置：固定；
最高：0%；
左：0%；
右：0%；
高度：10vh；
z指数：1；
边框底部：实心；
}
海德菲尔先生{
高度：10vh；
边界：无；
}
.收割台容器{
宽度：100%；
高度：自动；
显示器：flex；
flex-flow：行nowrap；
证明内容：中心；
保证金：自动；
左边距：自动；
右边距：自动；
}
.标志容器{
浮动：左；
宽度：40%；
左侧填充：1vh；
显示器：flex；
flex-flow：行nowrap；
对正内容：左；
}
.导航集装箱{
宽度：60%；
显示器：flex；
flex-flow：行nowrap；
//对正内容：空间均匀；
保证金：自动；
左边距：自动；
右边距：自动；
文本对齐：居中；
}
.均匀地间隔{
对正内容：空间均匀；
}
.标志{
高度：8vh；
最大宽度：80vw；
垫顶：1vh；
垫底：1vh；
左：4vh；
显示：块；
对象匹配：包含；
}
img{
-webkit用户拖动：无；
}
.导航{
字体系列：“Roboto”，衬线；
字体大小：2vw；
文本对齐：居中；
页边顶部：自动；
页边距底部：自动；
颜色：#000000；
左填充：自动；
右侧填充：自动；
线高：1米；
对象匹配：包含；
文字装饰：无；
}
@仅介质屏幕和（最大宽度：500px）{
.导航{
字体系列：“Roboto”，衬线；
字体大小：2.5vw；
文本对齐：居中；
页边顶部：自动；
页边距底部：自动；
颜色：#000000；
左填充：自动；
右侧填充：自动；
线高：1米；
对象匹配：包含；
文字装饰：无；
}
}
.导航：悬停{
颜色：#096e67；
}
a:链接{
颜色：#000000；
文字装饰：无；
}
h1{
字体系列：“Roboto”，衬线；
字体大小：4vw；
文本对齐：左对齐；
边际上限：0px；
边缘底部：0px；
颜色：#000000；
左：4vh；
右侧填充：2vh；
垫底：0.5vh；
线高：1米；
}
@仅介质屏幕和（最大宽度：500px）{
h1{
字体系列：“Roboto”，衬线；
字体大小：8vw；
文本对齐：左对齐；
边际上限：0px；
边缘底部：0px；
颜色：#000000；
左：2vh；
右侧填充：2vh；
垫底：0.5vh；
线高：1米；
}
}

网站标题
第1页
第2页
第3页
第4页

body，html{
最大宽度：100%；
填充：0vw；
利润率：0vw；
}
.标题{
背景色：#ffffff；
位置：固定；
最高：0%；
左：0%；
右：0%；
高度：10vh；
z指数：1；
边框底部：实心；
}
海德菲尔先生{
高度：10vh；
边界：无；
}
.收割台容器{
宽度：100%；
高度：自动；
显示器：flex；
flex-flow：行nowrap；
证明内容：中心；
保证金：自动；
左边距：自动；
右边距：自动；
}
.标志容器{
浮动：左；
宽度：40%；
左侧填充：1vh；
显示器：flex；
flex-flow：行nowrap；
对正内容：左；
}
.导航集装箱{
宽度：60%；
显示器：flex；
flex-flow：行nowrap；
//对正内容：空间均匀；
保证金：自动；
左边距：自动；
右边距：自动；
文本对齐：居中；
}
.均匀地间隔{
对正内容：空间均匀；
}
.标志{
高度：8vh；
最大宽度：80vw；
垫顶：1vh；
垫底：1vh；
左：4vh；
显示：块；
对象匹配：包含；
}
img{
-webkit用户拖动：无；
}
.导航{
字体系列：“Roboto”，衬线；
字体大小：2vw；
文本对齐：居中；
页边顶部：自动；
页边距底部：自动；
颜色：#000000；
左填充：自动；
右侧填充：自动；
线高：1米；
对象匹配：包含；
文字装饰：无；
}
@仅介质屏幕和（最大宽度：500px）{
.导航{
字体系列：“Roboto”，衬线；
字体大小：2.5vw；
文本对齐：左对齐；
页边顶部：自动；
页边距底部：自动；
颜色：#000000；
左填充：自动；
右侧填充：自动；
线高：1米；
对象匹配：包含；
文字装饰：无；
}
}
.导航：悬停{
颜色：#096e67；
}
a:链接{
颜色：#000000；
文字装饰：无；
}
h1{
字体系列：“Roboto”，衬线；
字体大小：4vw；
文本对齐：左对齐；
边际上限：0px；
边缘底部：0px；
颜色：#000000；
左：4vh；
右侧填充：2vh；
垫底：0.5vh；
线高：1米；
}
@仅介质屏幕和（最大宽度：500px）{
h1{
字体系列：“Roboto”，衬线；
字体大小：8vw；
文本对齐：左对齐；
边际上限：0px；
边缘底部：0px；
颜色：#000000；
左：2vh；
右侧填充：2vh；
垫底：0.5vh；
线高：1米；
}
}
钮扣{
显示：无；
}
导航{
显示器：flex；
弹性：1；
对正内容：空间均匀；
}
@介质（最大宽度：500px）{
导航{
位置：相对位置；
文本对齐：左对齐；
填充：10px；
显示：无；
}
主动导航{
显示：内联；
}
钮扣{
显示：块；
位置：绝对位置；
顶部：-27px；
右：10px；
宽度：25px；
高度：25px；
}
按钮：之前{
字体系列：Fontsome；
内容：“\f0c9”；
}
.收割台容器{
柔性流：行换行；
}
.logo容器、.navigation容器{
宽度：100%；
}
.导航集装箱{
证明内容：柔性端；
右边填充：10px；
位置：相对位置；
}
.navigation-container.active{
}