Html 在手机上使用徽标图像作为导航栏下拉列表的问题

我在使用导航栏下拉按钮的徽标代替典型的3栏按钮时遇到问题

我试图实现的是使用一个图像来代替3栏按钮，当单击/点击时，导航栏折叠显示。这在桌面上正常工作，但在移动设备上，图像具有随机不透明背景，图像未正确对齐，当点击徽标时，导航栏折叠菜单也未正确对齐

#导航栏主页{
位置：绝对位置；
顶部：0px；
右：0；
宽度：100%；
高度：100px；
z指数：1；
法纳夫先生{
颜色：$color mainDk；
填充：10px 10px 10px 10px；
文本对齐：右对齐；
}
a:悬停{
字体大小：粗体；
颜色：$color mainDk；
}
h3{
颜色：$color mainDk；
}
h3：悬停{
字体大小：粗体；
颜色：$color mainDk；
}
.下拉菜单{
背景色：#4f484675；
边界半径：4px；
}
.下拉项{
颜色：$color mainDk；
}
.下拉项：悬停{
字体大小：粗体；
背景色：#4f484675；
}
i:悬停{
字体大小：粗体；
颜色：$color mainDk；
}
.导航链路{
颜色：$color mainDk；
}
}
#导航杆次级{
位置：绝对位置；
顶部：0px；
右：0；
宽度：100%；
高度：100px；
法纳夫先生{
颜色：$color altDk；
填充：6px；
文本对齐：右对齐；
}
a:悬停{
字体大小：粗体；
颜色：$color altDk；
}
h3{
颜色：$color altDk；
}
h3：悬停{
字体大小：粗体；
颜色：$color altDk；
}
.下拉菜单{
背景色：#4f484675；
边界半径：4px；
}
.下拉项{
颜色：$color altDk；
}
.下拉项：悬停{
字体大小：粗体；
}
i:悬停{
字体大小：粗体；
颜色：$color altDk；
}
.导航链路{
颜色：$color altDk；
}
}
#标志{
位置：绝对位置；
顶部：-20px；
左：-20px；
最大宽度：200px；
}
#切换二级{
颜色：$color altDk；
：悬停{
颜色：$color altDk！重要；
}
}
@媒体屏幕和屏幕（最大宽度：768px）{
#标志{
可见性：隐藏！重要；
}
#logoNav{
位置：绝对位置；
顶部：-20px；
左：-30px；
最大宽度：200px；
背景大小：0%；
背景色：透明；
}
.导航栏倒塌{
顶部：95px！重要；
位置：相对位置；
}
.导航栏导航{
背景色：#4f484675；
最大宽度：100px；
边界半径：4px；
左边距：2px！重要；
}
#导航杆次级{
z指数：1；
法纳夫先生{
颜色：$color mainDk；
填充：10px 10px 10px 10px；
文本对齐：右对齐；
}
a:悬停{
字体大小：粗体；
颜色：$color mainDk；
}
h3{
颜色：$color mainDk；
}
h3：悬停{
字体大小：粗体；
颜色：$color mainDk；
}
.下拉菜单{
背景色：#4f484675；
边界半径：4px；
}
.下拉项{
颜色：$color mainDk；
}
.下拉项：悬停{
字体大小：粗体；
背景色：#4f484675；
}
i:悬停{
字体大小：粗体；
颜色：$color mainDk；
}
.导航链路{
颜色：$color mainDk；
}
}
}