html - 定位固定导航栏重叠其他内容
问题描述
我正在尝试在导航栏下添加更多内容，但是每次我尝试导航栏与下一个项目重叠时，我都希望将其固定在网站上。我也尝试了 z-index，这不是问题。
我不知道是否是引导程序预安装的东西，但这让我发疯。
/* roots and body stuff */
body {
font-family: "Roboto", sans-serif;
color: #1a1818;
}
/* nav bar stuff */
.logo-and-section-container {
width: 100%;
display: flex;
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 2rem;
padding-right: 2rem;
position: fixed;
}
.navbar-logo-container {
width: 5%;
}
.brand-logo {
width: 80px;
padding-right: 2em;
display: flex;
justify-content: center;
align-items: center;
}
.union-logo-img {
width: 100%;
}
.union-logo-text-for-media-query {
font-size: 0;
}
.section-container {
display: flex;
align-items: center;
margin-left: 40px;
}
.dropdown {
font-size: 1.2rem;
margin-right: 8px;
}
.fa-arrow-right {
font-size: 0.8rem;
margin-right: 2em;
margin-left: 0.3em;
}
.secion-dropdown,
.fa-arrow-right {
color: #1a1818;
text-decoration: none;
transition: all 0.3s ease-out;
}
.secion-dropdown:hover {
text-decoration: none;
color: #e14f17;
}
.secion-dropdown:hover>.fa-arrow-right {
transform: rotate(90deg);
color: #e14f17;
}
.search-bar-container {
width: 45%;
padding-left: 1%;
display: flex;
justify-content: flex-end;
}
.search-bar {
align-self: center;
}
.search-button,
.btn-outline-success {
color: black;
border: 1px solid #ced4da;
border-radius: 0.25rem;
}
.search-button:hover,
.btn-outline-success:hover {
color: #fff;
background-color: #e14f17;
border-color: #e14f17;
}
@media (max-width: 916px) {
.search-bar-container {
visibility: hidden;
padding-left: 1000000px;
}
.logo-and-section-container {
padding-top: 3rem;
padding-bottom: 0;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.union-logo-img {
width: 10rem;
margin-right: 2em;
margin-bottom: 16px;
}
.navbar-logo-container {
flex-direction: column;
text-decoration: none;
padding-bottom: 1.75rem;
}
.union-logo-text-for-media-query {
font-size: 2rem;
font-weight: 700;
color: #1a1818;
display: flex;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
.section-container {
text-align: center;
padding-right: 7%;
}
.fa-arrow-right {
padding-left: 15px;
}
}
/* nav bar stuff ends */
.division-bar {
width: 80%;
height: 2em;
background: purple;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<link rel="stylesheet" href="/union project/style.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/fa5117c01c.js" crossorigin="anonymous"></script>
<link rel="icon" href="img/Union-U-Orange.png" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet" />
<title>UNION BINDINGS CO.</title>
</head>
<body>
<!-- nav bar and hearder -->
<div class="logo-and-section-container">
<nav class="navbar-logo-container">
<a class="brand-logo" href="#">
<img src="/union project/img/Union-U-Orange.png" alt="union logo orange" class="union-logo-img" />
<p class="union-logo-text-for-media-query">UNION BINDINGS CO.</p>
</a>
</nav>
<div class="section-container">
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">All mountain</a>
<a class="dropdown-item" href="#">Freestyle</a>
<a class="dropdown-item" href="#">Splitboarding</a>
</div>
</div>
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Technology<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">100% Focus</a>
<a class="dropdown-item" href="#">Forged Carbon</a>
<a class="dropdown-item" href="#">Jet Fusion Printing</a>
<a class="dropdown-item" href="#">Union Specific Technology</a>
</div>
</div>
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">International Team</a>
<a class="dropdown-item" href="#">Team Movie</a>
</div>
</div>
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Support<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Size Chart</a>
<a class="dropdown-item" href="#">Disk Fit</a>
<a class="dropdown-item" href="#">How to Set up Your Bindings</a>
</div>
</div>
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Local Shops</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Distributors</a>
</div>
</div>
</div>
<div class="search-bar-container">
<nav class="search-bar">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0 search-button" type="submit">
Search
</button>
</form>
</nav>
</div>
</div>
<!-- nav bar and hearder ends -->
<div class="division-bar"></div>
</body>
</html>解决方案
用下面的代码替换你的身体。
body {
font-family: "Roboto", sans-serif;
padding-top: 80px;
}
.brand-logo {
width: 80px;
padding-right: 2em;
display: flex;
justify-content: center;
align-items: center;
}
.union-logo-img {
width: 100%;
}
.dropdown {
font-size: 1.2rem;
margin-right: 8px;
}
.fa-arrow-right {
font-size: 0.8rem;
margin-right: 2em;
margin-left: 0.3em;
}
.secion-dropdown,
.fa-arrow-right {
color: #1a1818;
text-decoration: none;
transition: all 0.3s ease-out;
}
.secion-dropdown:hover {
text-decoration: none;
color: #e14f17;
}
.secion-dropdown:hover>.fa-arrow-right {
transform: rotate(90deg);
color: #e14f17;
}<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<link rel="stylesheet" href="/union project/style.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/fa5117c01c.js" crossorigin="anonymous"></script>
<link rel="icon" href="img/Union-U-Orange.png" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet" />
<title>UNION BINDINGS CO.</title>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img src="/union project/img/Union-U-Orange.png" alt="Logo" class="union-logo-img" /></a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">All mountain</a>
<a class="dropdown-item" href="#">Freestyle</a>
<a class="dropdown-item" href="#">Splitboarding</a>
</div>
</div>
</li>
<li class="nav-item active">
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Technology<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">100% Focus</a>
<a class="dropdown-item" href="#">Forged Carbon</a>
<a class="dropdown-item" href="#">Jet Fusion Printing</a>
<a class="dropdown-item" href="#">Union Specific Technology</a>
</div>
</div>
</li>
<li class="nav-item active">
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">International Team</a>
<a class="dropdown-item" href="#">Team Movie</a>
</div>
</div>
</li>
<li class="nav-item active">
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Support<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Size Chart</a>
<a class="dropdown-item" href="#">Disk Fit</a>
<a class="dropdown-item" href="#">How to Set up Your Bindings</a>
</div>
</div>
</li>
<li class="nav-item active">
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Local Shops</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Distributors</a>
</div>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>navbar-expand-lg的 Bootstrap Navbar 切换，通过向<nav>标签添加类，左侧显示徽标，右侧显示切换器。还添加fixed-top了固定导航栏的类。要更改导航栏的颜色，请参阅配色方案。
最重要的是解决导航栏内容重叠的问题，需要一些padding-topfor body，然后才能完美运行。请参阅此演示以确保其正常工作。
推荐阅读
- python - 具有多个条件`and_`两个值以上的SqlAlchemy案例？
- php - Datatable Ajax成功/完成接收数据（Laravel）
- mingw - 如何在 github 操作上构建 WxWidgets 程序？
- node.js - 如何在 morgan() 中间件中获取请求正文？
- node.js - 如何使用标签文件格式的文本文件在mongodb中存储数据
- next.js - 在 React/Next.js 中使用平滑滚动条的 GSAP ScrollTrigger 意外行为
- arrays - 在Javascript中切片和映射数组但看不到切片数组出现
- machine-learning - 形状 '[-1, 2, 4, 28]' 对于大小为 768 的输入无效
- c# - 改进事件订阅
- php - 如何从 mysql 数据库中设置选项选择元素的数据以使用 php + jquery + ajax 进行更新