响应的侧边栏图像不会在调整大小时显示

Question

这是我的侧边栏：https://jsfiddle.net/8ejwykwv/1/

问题是在小屏幕上，侧边栏完全消失。虽然我试图实现的是某个屏幕尺寸，但只显示图像。示例：没有主页文本的主页图标。在一个非常小的屏幕上只有一个按钮，可以左右滑动或自上而下滑动侧边栏。

我尝试使用

 @media(min-width:42em){
     .sidebar{
        width:4em;
     }
 }

但我很遗憾。 我理解媒体查询以及可以用它们做些什么，但我不确定如何使用我的侧边栏和顶部栏进行操作，这样我就可以在点击时显示不仅仅是图像的图标。

链接作为我一直在尝试的参考：

This link和/或This example

感谢任何帮助。我是一个初学者，所以如果这可能是一件简单的事情，我会事先道歉。任何帮助表示赞赏！

Answer 1

只需修复侧栏类中的宽度：

.sidebar {
    position: fixed;
    top: 50px;
    bottom: 0;
    width:160px !important;
    left: 0;
    z-index: 1000;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;  
    border-right: 1px solid #eee;
    background-color: black

}

这是小提琴https://jsfiddle.net/c8h5ede7/8/

修改 您也可以尝试此解决方案

 @media only screen and (max-width: 42em) {
    .sidebar{
        width:8em !important;
     }
}

https://jsfiddle.net/c8h5ede7/12/