在Materialise css中创建小Navbar和侧面板

Question

我正在为我的新项目使用materialize css.我有一个简单的模拟我想到的页面.这就是我想要的.上面的导航栏和侧面板不应该隐藏.

我已经尝试更改物化的CSS以获得侧导航栏,但无济于事.我改变了

@media only screen and (max-width: 992px) {
    .side-nav.fixed {
-webkit-transform: translateX(-105%);
        transform: translateX(-105%);
}

至

@media only screen and (max-width: 2000px) {
    .side-nav.fixed {
-webkit-transform: translateX(-105%);
        transform: translateX(-105%);
}

我也尝试更改.js文件,但它也没有用.我已经减少了普通导航栏的大小,超过line-height了nav 的属性.是否可以将导航栏放在一起？如果没有,我怎么能得到一个侧面板.我只需要侧面板显示4个图标,这些图标将有工具提示,点击后会加载模态.我尝试使用materializecss的网格机制但是无法得到我想要的东西.

任何帮助将非常感激.

谢谢.

Answer 1

您是否尝试使用顶部导航栏和固定侧边栏？然后,您可以设置侧边栏的宽度,以获得所需的大小.

<header>
      <nav class="top-nav">
        <div class="nav-wrapper">
            <ul class="right hide-on-med-and-down">
                <li><a href="#">Log In</a></li>
                <li><a href="#">Sign Up</a></li>
            </ul>
        </div>
      </nav>
      <ul style="width:120px; margin-top:65px;" class="side-nav fixed">
        <li><a href="#">Icon 1</a></li>
        <li><a href="#">Icon 2</a></li>
      </ul>      
</header>