Javascript 2个与响应式下拉菜单（汉堡包）相关的问题

我正在练习如何制作一份反应灵敏的汉堡包菜单，我有两个问题，我想让它发挥作用

我在汉堡菜单上使用了一个很棒的图标，当屏幕大于480px时，它不想消失。唯一可行的方法是在icon类上应用内联样式“display:none”，但是切换不起作用。如何仅当媒体查询条件“最大宽度：480px”满足时才显示burger图标

EDIT：好的，我通过在常规和媒体查询css上对我的图标类应用“！important”来解决这个问题。它正在工作，但我听说使用这种方法是一种不好的做法？

我试图通过添加过渡动画使下拉菜单上下滑动。我也能得到如何做的提示吗

多谢各位

$（文档）.ready（函数（）{
$（“.fas”）。在（“单击”，函数（）{
$（“标题导航ul”）。切换类别（“打开”）；
});
});
正文{
字体系列：格鲁吉亚；
保证金：0；
}
.包装纸{
最大宽度：100%；
最大宽度：1180px；
填充：0 10px；
保证金：0自动；
}
标题导航{
浮动：对；
}
收割台导航h2{
文本缩进：-10000px；
身高：0；
保证金：0；
}
标题导航李{
浮动：左；
列表样式类型：无；
利润率：10px 20px；
}
标题导航李a{
文字装饰：无；
颜色：#333；
字号：18px；
}
//媒体查询//
@媒体屏幕和屏幕（最大宽度：768px）{
标题导航{
浮动：无；
清除：左；
宽度：100%；
}
标题导航ul{
保证金：0；
填充：0；
}
h1.标志{
保证金：10px自动0；
浮动：无；
}
标题nav ul li{
利润率：10px0；
宽度：20%；
填充：0；
文本对齐：居中；
}
}
@媒体屏幕和屏幕（最大宽度：480px）{
.fa酒吧{
边缘顶部：10px；
文本对齐：居中；
字体大小：1.5rem；
颜色：#333；
高度：40px；
宽度：100%；
光标：指针；
}
标题.包装{
填充：0；
}
标题导航ul{
溢出：隐藏；
背景:#505050；
身高：0；
}
收割台导航ul打开{
高度：自动；
}
标题nav ul li{
浮动：无；
文本对齐：左对齐；
宽度：100%；
保证金：0；
}
标题nav ul li a{
颜色：#fff；
填充：10px；
边框底部：1px实心#404040；
显示：块；
保证金：0；
}
#主菜单李{
浮动：无；
宽度：96%；
利润率：30px2%；
}
}

Resto
Resto
主导航







您可以使用字体图标作为菜单的背景图像，如下所示：

.fa-bars{
  content: "\f0c9"; 
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
}

这将使添加显示变得更容易：通过javascript或媒体查询无显示。
您能详细说明一下吗？除非我做对了，否则它似乎仍然不起作用。HTML是什么样子的？