引导3-使虚拟导航栏不推送站点内容

Question

我想创建边导航栏，它不与站点内容交互(不移动内容)。示例从其中一个站点引导3导航条：

https://bootsnipp.com/snippets/featured/side-menu-on-hover

我知道，在互联网或论坛必须是共同答辩的帖子，但我找不到它。我寻求建议/链接或上述导航栏的例子，以使其不推送内容。

Answer 1

如果使用CSS将导航栏设置为绝对左上角，它将不会推送内容：

.navbar {position:absolute;top:0;left:0;}

如果只希望在桌面上发生这种情况，请将规则集放在这样的媒体查询中：

@media (min-width: 765px) {
    .navbar {position:absolute;top:0;left:0;}
}

如果您想在所有屏幕大小(也是桌面)上显示汉堡包菜单(显示/隐藏菜单)，请查看this question。