Jquery 使导航栏响应

我刚刚了解了响应式设计，即将a页面调整为更小的屏幕以便于访问，但是我很难思考如何使我的导航栏响应（显示三个导航栏而不是整个导航栏）

这是我的自定义导航栏：

：根{--主颜色：#004771；--主颜色#阴影：#072060；--页脚#颜色：#383838；}
.navbar_main容器{宽度：100%；高度：50px；背景颜色：var（--main_颜色）；显示：flex；对齐项目：居中；填充：0px 100px；字体大小：17px；}
.navbar_link_wrapper{宽度：自动；高度：100%；位置：相对；}
.navbar_链接{颜色：白色；字体大小：17px；宽度：100%；高度：100%；显示：柔性；对齐内容：中心；对齐项目：中心；填充：0px 30px；}
.navbar_link_wrapper:hover{background color:var（--main_color_shade）；}
.navbar_sublinks_container{位置：绝对；框阴影：4px 4px 4px rgba（0,0,0.2）；宽度：300px；高度：自动；左侧：0px；顶部：-700px；过渡：所有600ms轻松；背景颜色：#383838；z索引：999999999；显示：无；弯曲方向：列；}
.navbar_子链接{填充：0px 15px；高度：50px；显示：flex；对齐项目：居中；过渡：所有600ms轻松；颜色：rgba（255255,0.8）；字体大小：14px；字体重量：400；}
.navbar_子链接_线{宽度：100%；边框底部：1px实心rgba（255255255,0.1）；高度：1px；边距：0自动；}
.navbar_子链接_标题{填充：10px 0px；宽度：100%；颜色：白色；字体大小：13px；}
.active{背景色：var（--main_color_shade）；}
.active_sub{背景色：rgba（0,0,0,0.3）；}
.navbar_子链接：悬停{背景色：rgba（0,0,0,0.3）；}
.navbar_link_包装器：hover.navbar_子链接_容器{display:flex；top:100%；}

将

最大宽度：100vw

（vw是视口宽度）添加到

.navbar\u主容器

从

链接中删除
宽度：100%


：根目录{
--主色：#004771；
--主色调：072060；
--页脚颜色：#3838；
}
.navbar_主容器{
最大宽度：100vw；
高度：50px；
背景色：var（--主色）；
显示器：flex；
对齐项目：居中；
填充：0px 100px；
字号：17px；
}
.navbar\u链接\u包装器{
宽度：自动；
身高：100%；
位置：相对位置；
}
.navbar_链接{
颜色：白色；
字号：17px；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
填充：0px 30px；
}
.navbar\u link\u包装器：悬停{
背景色：var（--主色调）；
}
.navbar\u子链接\u容器{
位置：绝对位置；
盒影：4px4p4pRGBA（0,0,0,0.2）；
宽度：300px；
高度：自动；
左：0px；
顶部：-700px；
过渡：所有600毫秒缓解；
背景色：#3838；
z指数：99999999；
显示：无；
弯曲方向：立柱；
}
.navbar_子链接{
填充：0px 15px；
高度：50px；
显示器：flex；
对齐项目：居中；
过渡：所有600毫秒缓解；
颜色：rgba（255，255，255，0.8）；
字体大小：14px；
字体大小：400；
}
.navbar\u子链接\u行{
宽度：100%；
边框底部：1px实心rgba（255、255、255、0.1）；
高度：1px；
保证金：0自动；
}
.navbar\u子链接\u标题{
填充：10px 0px；
宽度：100%；
颜色：白色；
字体大小：13px；
}
.主动{
背景色：var（--主色调）；
}
.主动式潜艇{
背景色：rgba（0,0,0,0.3）；
}
.navbar_子链接：悬停{
背景色：rgba（0,0,0,0.3）；
}
.navbar\u链接\u包装器：悬停.navbar\u子链接\u容器{
显示器：flex；
最高：100%；
}
如果您想自己编写，应该使用所谓的
CSS媒体查询
，这在