html - Navbar Burger (Dropdown) 将内容下推?
问题描述
当我的导航栏折叠时,会出现汉堡菜单。每当我点击它时,下面的所有内容都会被下推,给我留下一个乱七八糟的主页。
我的导航栏:
<section class="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="WildfireGraphic1.png" class="rounded float-left" alt="icon1"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Film</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Info</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Über uns</a>
</li>
</ul>
</div>
</nav>
</section>
我的 CSS:
body{
text-align: justify !important;
}
#nav-bar{
position: fixed;
left: 0px;
top: 0px;
width: 100px;
}
.navbar-brand img{
height: 40px;
padding-left: 30;
}
.navbar-nav li{
padding: 0 10px;
}
.navbar-nav li a{
float: right;
text-align: left;
}
.nav-bar ul li a:hover{
color: #000000!important;
}
.navbar{
background: #fff;
}
.navbar-toggler{
border: none!important;
}
.nav-link{
color: #555!important;
font-weight: 600;
font-size: 16px;
}
我尝试过使用 Z-Index 方法,但到目前为止还没有运气。也许我做错了什么?
https://jsfiddle.net/Lqzs1jdw/8/
提前致谢。
解决方案
您刚刚打错字,将其更改#
为.
将解决问题
例子:
.nav-bar{
position: fixed;
width: 100%;
}
推荐阅读
- redmine - Redmine 4.1导出PDF的图像丢失
- python-3.x - 无法从子包访问顶级 python 包
- php - 需要合并/消除嵌套数组中的重复项
- python - 如何在python中替换匹配的字符串
- java - 如何为 OAuth 2.0 设置密码授予凭据?
- r - 如何在 R 中使用多个条件组织数据透视表
- amazon-glacier - AWS Glacier 文件验证
- flutter - 如何在flutter中实现双向支付网关(接受和退款)?
- windows - Windows 驱动程序如何与硬件通信?
- laravel - 无法使用 phpseclib 生成的密钥从 GitHub 通过 SSH 克隆