css - 添加不覆盖图像的固定粘性导航栏
问题描述
我正在尝试创建一个响应式引导粘性导航以高于轮播。然而,导航栏覆盖了图像的顶部比例。我怎样才能改变它以使其停留在桌面/移动设备之上,但不会溢出到图像本身。
<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 类,它工作正常。
推荐阅读
- unit-testing - 简单的 Mokito 示例
- graph-theory - Sagemath Graph Theory:is_perfect() 返回 false,即使团数和色数相等
- batch-file - 用于重命名文件夹中文件的批处理命令
- c++ - 请帮我解决一个简单的 c++ std::time_t 问题
- asynchronous - 我可以在 GCP 云函数中使用 python - aiohttp 吗?
- f# - 为什么代码的匹配版本不能在 F# 中编译
- c++ - 将代码转换为 C++ 时,如何使用具有 typedef 枚举的 C 标头?
- php - 即使没有选择,如何获取单选按钮的所有值?
- python - 使用换行符将列表连接到字符串时出现问题
- arrays - 需要通用数组帮助(返回哪些数组共享一个共同值)