css - 调整大小时不显示响应式侧边栏图像

Question

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

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

我试过用

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

但我几乎迷路了。 我了解媒体查询以及可以用它们做什么，但我不确定如何使用我的侧边栏和顶部栏进行操作，以便我拥有喜欢的 fa-fa 栏，点击时将显示的不仅仅是图像。

链接作为我一直在尝试的引用:

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

}

这是 fiddle https://jsfiddle.net/c8h5ede7/8/

编辑 您也可以试试这个解决方案

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

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