我正在尝试创建一个响应式bootstrap粘性导航器,以转到旋转木马上方。然而,导航栏覆盖了图像的最大比例。我如何改变以便它在桌面/移动设备上方,但不会溢出到图像本身。
<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar " color-on-scroll="400">
<div class="container">
<div class="navbar-translate">
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span><i class="fas fa-bars" style="
color: #ffffff;
"></i></span>
</button>
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" class="img-fluid" alt="Responsive image">
</div>
<div class="collapse navbar-collapse justify-content-end" id="navigation" >
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)" onclick="scrollToDownload()">
<p>Location</p>
给出margin-top:100px或导航菜单的高度,将该高度应用于滑块父div类,它可以正常工作。
解决方案:我添加了body {padding-top:90px; }