【发布时间】：2022-10-22 01:15:34
【问题描述】：
更新：我设法让桌面工作。现在只需要整理一下手机。
我遇到的问题是下拉菜单在移动/桌面上似乎无法正常工作。就桌面/移动设备而言，在造型方面它也很好/很好。但问题在于功能。我在下拉项中放入了一些占位符链接（以查看是否会使它们出现），但事实并非如此。
查看我要开始工作的菜单：
<nav id="navbar"class="navbar navbar-expand-lg">
<div class="container-fluid">
<img class="navbar-brand" src="[[++url_images]]/logos/logo.jpg" alt="Your image is not loading"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active home" aria-current="page" href="https://www.google.com">Home</a>
</li>
<li class="nav-item">
<a class="nav-link about" href="https://www.google.com">About us</a>
</li>
<li class="nav-item">
<a class="nav-link contact" href="https://www.google.com">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="https://www.google.com">Action</a></li>
<li><a class="dropdown-item" href="https://www.google.com">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="https://www.google.com">Something else here</a></li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
- 另外值得注意的是：我可以注意到课程在折叠和折叠和折叠显示之间切换。但它没有显示任何项目。
有人知道为什么菜单不显示吗？这可能是预先存在的 CSS 正在干扰吗？ （我已经在有限的范围内检查了这一点，因为这是我的第一个想法。但我无法通过禁用一些明显的项目来显示项目。） 现在我想知道我是否遗漏了什么，或者我应该深入挖掘我的自定义 CSS。
目前也无法再次解决这个问题（但我之前在一个更简单的引导菜单上管理过这个，所以我会弄清楚这个。但如果有人有某种神奇的建议，我愿意接受。）
另见附上我当前编译的 CSS：
/* MODULES ***************************************************************************************/
@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Open+Sans:wght@400;600;700&display=swap");
/* PARTIALS **************************************************************************************/
.heading-xxl {
font-family: "Bree Serif", serif;
font-weight: 400;
font-size: 40px;
line-height: 48px;
}
.heading-xl {
font-family: "Bree Serif", serif;
font-weight: 400;
font-size: 34px;
line-height: 38px;
}
.heading-l {
font-family: "Bree Serif", serif;
font-weight: 400;
font-size: 20px;
line-height: 24px;
}
.heading-m {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 24px;
}
.heading-s {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
.heading-xs {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
.font-text-l {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
}
.font-text-m {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
.font-text-s {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 21px;
}
.heading-xxl.color-here {
color: #07BE54;
}
.heading-xxl.color-here {
color: #949BFF;
}
.heading-xxl.color-here {
color: #FF965A;
}
.heading-xxl.color-here {
color: #25DC71;
}
.heading-xxl.color-here {
color: #125C30;
}
.heading-xl.color-here {
color: #07BE54;
}
.heading-xl.color-here {
color: #949BFF;
}
.heading-xl.color-here {
color: #FF965A;
}
.heading-xl.color-here {
color: #25DC71;
}
.heading-xl.color-here {
color: #125C30;
}
html {
background-color: #1e4785;
}
@media print, screen and (max-width: 63.99875em) {
html {
max-width: 100%;
}
}
.content {
max-width: 70%;
}
.gradient-line-transparant {
background: linear-gradient(to right, rgb(30, 71, 133), rgb(246, 255, 255), rgb(246, 255, 255), rgb(30, 71, 133));
}
.logo {
max-width: auto;
max-height: auto;
}
.logo.center {
display: flex;
margin-left: auto;
margin-right: auto;
height: auto;
width: 100%;
padding-top: 28px;
}
.logo.chinook {
align-self: center;
}
.photo {
max-width: auto;
max-height: auto;
}
@media print, screen and (max-width: 63.99875em) {
.photo {
max-width: 70%;
max-height: auto;
}
}
.photo.left {
float: left;
margin-right: 20px;
}
.photo.right {
float: right;
}
div h1 {
font-size: 40px;
color: #1e4785;
text-align: center;
margin-top: 0;
}
@media print, screen and (max-width: 63.99875em) {
div h1 {
font-size: 0.9em;
align-self: center;
}
}
div h2, div h3, div h4, div h5 {
color: #1e4785;
text-align: center;
margin-top: 0;
}
div p {
width: 100%;
}
p, li, ul, u, i {
color: #1e4785;
font-size: 20px;
margin-left: auto;
margin-right: auto;
}
a {
color: #f89830; /*Dutch Orange*/
}
iframe.discord {
width: 425px;
height: 500px;
}
@media print, screen and (max-width: 63.99875em) {
iframe {
width: 225px;
height: 300px;
float: left;
}
}
.gametracker {
float: right;
}
li {
display: inline;
margin-left: 100px;
align-items: center;
}
a {
color: #f89830; /*Dutch Orange*/
}
a:hover {
color: #f89830;
opacity: 0.75;
}
/* ---------------------Sticky Nav Styling--------------------- */
/* Style the navbar */
#navbar {
overflow: hidden;
padding: 0 0 0 0;
background-color: #1e4785;
height: 10vh;
}
.navbar-brand {
width: 95px;
height: 95px;
}
.container {
--bs-gutter-x: 0;
}
.container .menu {
padding: 0 0 0 0;
}
/* Navbar links */
#navbar a {
float: left;
display: block;
color: #f89830;
text-align: center;
text-decoration: none;
height: 3vh;
}
@media print, screen and (max-width: 63.99875em) {
#navbar a {
font-size: 12px;
margin-top: 17px;
}
}
#navbar a.home {
margin-left: 5em;
}
@media print, screen and (max-width: 63.99875em) {
#navbar a.home {
margin-left: 1em;
}
}
#navbar a.about {
padding-left: 50px;
}
#navbar a.contact {
padding-left: 50px;
}
/* Page content */
.content {
padding: 16px;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
position: fixed;
height: 5vh;
width: 100%;
background-color: #1e4785;
margin-top: -0.5em;
z-index: 99999;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 60px;
}
/*header closing tag*/
footer {
text-align: center;
}
footerli, footer ul, footer u, footer i {
color: #1e4785;
font-size: 20px;
text-align: center;
}
footerh1, footer h2, footer h3, footer h4, footer h5 {
color: #1e4785;
text-align: center;
}
footer a, footer a:hover {
background-color: #1e4785;
color: #f89830; /*Dutch Orange*/
text-align: center;
}
footer p.col-md {
background-color: #1e4785;
color: #f7ffff;
font-size: 18px;
margin-bottom: 0;
}
section {
align-self: center;
}
section div {
text-align: center;
}
section div p {
font-weight: normal;
}
/*---------------Button styling below---------------*/
.button-primary {
align-items: center;
appearance: none;
background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
border: 0;
border-radius: 6px;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, rgba(58, 65, 111, 0.5) 0 -3px 0 inset;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-flex;
font-family: "JetBrains Mono", monospace;
height: 48px;
justify-content: center;
line-height: 1;
list-style: none;
overflow: hidden;
padding-left: 16px;
padding-right: 16px;
position: relative;
text-align: left;
text-decoration: none;
transition: box-shadow 0.15s, transform 0.15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow, transform;
font-size: 18px;
}
.button-primary:focus {
box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}
.button-primary:hover {
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
transform: translateY(-2px);
}
.button-primary:active {
box-shadow: #3c4fe0 0 3px 7px inset;
transform: translateY(2px);
}
body {
background-color: #1e4785;
}
@media print, screen and (max-width: 63.99875em) {
.col-md {
font-size: 35px;
}
}
/* JAVASCRIPT *************************************************************************************/
/* FOUNDATION IMPORTS*/
html {
visibility: visible;
}
/*# sourceMappingURL=style.css.map */
【问题讨论】：
标签： html css menu navbar bootstrap-5