响应式菜单隐藏在 Bootstrap 幻灯片后面

Question

我一直在做定制的 Bootstrap 设计。我构建了一个响应式菜单，它使用 JS 来打开和关闭汉堡包菜单。我目前在我的 index.html 和我的 about.html 上有它。它会显示在 about.html 上，但不会显示在 index.html 上。我相信这是因为它被 Bootstrap 幻灯片隐藏了。

我在控制台查看了JS，没有报错。事实上，当我检查使用 Chrome 开发工具时，我可以简要地看到菜单背后 引导程序在页面加载时滑动（一毫秒）。

有人对如何解决这个问题有什么建议吗？

如果我需要分享实时链接，请告诉我如何分享，我会的。似乎我的链接不断被其他人删除，说我不允许链接到网站。

此外，当用户使用移动菜单时，我希望菜单将页面内容下推（而不是隐藏页面内容）。有人对如何实现这一目标有任何建议吗？

CSS

body {
  margin: 0;
  padding: 0;
  background: #faf9f6;
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  align-items: center;
}

.logo {
  max-height: 120px;
}

.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0 5px 0 0;
  background-image: linear-gradient(
    90deg,
    rgba(101, 13, 20, 1) 0%,
    rgba(43, 48, 135, 1) 100%
  );
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav-item {
  list-style: none;
  margin-right: 2rem;
}

.nav-item a {
  text-decoration: none;
  color: #fff;
}

.nav-item:first-child {
  margin-right: auto;
  margin-left: 2rem;
}

.hamburger {
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all o.3s ease-in-out;
  transition: all o.3s ease-in-out;
  background-color: black;
}

@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu {
    position: fixed;
    left: -100%;
    top: 70px;
    gap: 0;
    flex-direction: column;
    background-color: #3f245e;
    width: 100%;
    text-align: center;
    transition: 0.3s;
  }

  .nav-item,
  a {
    margin: 16px 0;
    color: #ffff;
  }

  .nav-menu.active {
    left: 0;
  }
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

@media only screen and (min-width: 2001px) {
  .carousel-caption h1 {
    font-size: 150px;
  }
}

@media only screen and (min-width: 1801px) and (max-width: 2000px) {
  .carousel-caption h1 {
    font-size: 115px;
  }
}

@media only screen and (min-width: 1090px) and (max-width: 1800px) {
  .carousel-caption h1 {
    font-size: 75px;
  }
}

@media only screen and (min-width: 801px) and (max-width: 1023.98px) {
  .carousel-caption h1 {
    font-size: 65px;
  }
}

@media only screen and (max-width: 800px) {
  .carousel-caption h1 {
    font-size: 55px;
  }
}

@media only screen and (max-width: 600px) {
  .carousel-caption h1 {
    font-size: 50px;
  }
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}

/* Carousel overlay */
.carousel-item::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #000;
  opacity: 0.7;
}

/* About Page Styling */

section {
  padding: 60px 0;
  overflow: hidden;
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color: #45505b;
}

.section-title p {
  margin-bottom: 0;
}

.section-row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
  padding-top: 20px;
}

.about .content h3 {
  font-weight: 700;
  font-size: 26px;
  color: #728394;
}

.fst-italic {
  font-style: italic !important;
}

.jesse-photo {
  padding: 0 20px;
}

.about .content ul {
  list-style: none;
  padding: 0;
}
.about .content ul i {
  font-size: 16px;
  margin-right: 5px;
  color: #0563bb;
  line-height: 0;
}

.bi-chevron-right::before {
  content: "\f285";
}

.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.type-container {
  width: 400px;
  overflow: hidden;
}

.type-container .text {
  position: relative;
  font-size: 26px;
  font-weight: 300;
  color: #491d4b;
}

.type-container .text.first-text {
  color: #728394;
  font-weight: 300;
}

.text.second-text:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #faf9f6;
  border-left: 2px solid #491d4b;
  animation: animate 3s steps(12) infinite;
}

@keyframes animate {
  40%,
  60% {
    left: calc(100% + 4px);
  }
  100% {
    left: 0%;
  }
}

/* MARKETING CONTENT
-------------------------------------------------- */
/* Padding for row of marketing cards */
.row {
  padding-bottom: 40px;
}

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}

/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: 0.75rem;
  margin-left: 0.75rem;
}

/* rtl:end:ignore */

.card {
  height: 100%;
}

.card .img-fit {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-text {
  flex-grow: 1;
}

img {
  transition: transform 0.25s;
}

.photo {
  overflow: hidden;
  height: 100%;
}

.photo:hover img {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .card .img-fit {
    aspect-ratio: 1.45 / 1;
  }
}

/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0;
  /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
  letter-spacing: -0.05rem;
}

/* rtl:end:remove */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

/*.hero {
    display: flex;
    flex-direction: column;
    background-image: url("https://heathology.online/custom-bootstrap/img/okc-downtown.jpg");
    height: 100vh; <--sets hero height
    width: 100%;  < -- sets hero width
    align-self: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    align-items: center;
    justify-content: center;
    position: relative;
} */

.carousel-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
  /* sets hero height */
  width: 100%;
  /* sets hero width */
}

.carousel-img-1 {
  background-image: url(http://heathology.online/custom-bootstrap/img/okc-downtown.jpg);
}

.carousel-img-2 {
  background-image: url(http://heathology.online/custom-bootstrap/img/oklahoma-city-1626593_1920.jpg);
}

.carousel-img-3 {
  background-image: url(http://heathology.online/custom-bootstrap/img/chisholm-creek.jpg);
}

@media only screen and (max-width: 480px) {
  .hero {
    width: 100%;
    /* sets hero width for mobile */
  }
}

/*.hero-text {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .75);
      
    
} */

.parallax {
  /* The image used */
  background-image: url("http://heathology.online/custom-bootstrap/img/okc-skyline.jpg");

  /* Set a specific height */
  min-height: 300px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.parrallax-text {
  font-size: 1.4rem;
  text-align: left;
  color: white;
}

.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.circle-image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
}

.featurette-image-1 {
  width: 500px;
  height: 500px;
  object-fit: cover;
}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: inherit;
}

/* Footer */
.footer-item:first-child {
  margin-left: 0px;
  margin-right: 0px;
}

主页 HTML:

<body class="antialiased items-center justify-center w-screen h-screen">
    <!-- Header Section -->
    <header>
        <nav>
            <ul class="nav-list nav-menu">
                <li class="nav-item"><a href="#home"><img class="logo" src="img/heathology-logo-horizontal-white.png"
                            alt="heathology logo"></a></li>
                <li class="nav-item"><a href="/custom-bootstrap/index.html">Home</a></li>
                <li class="nav-item"><a href="/custom-bootstrap/about.html">About</a></li>
                <li class="nav-item"><a href="http://heathology.online">Portfolio</a></li>
                <li class="nav-item"><a href="#contact">Contact</a></li>
                <form class="d-flex" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-primary" type="submit">Search</button>
                </form>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
    </header>
    <!-- Main Page Content -->
    <main>
        <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"
                    aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active carousel-img carousel-img-1"
                    aria-label="Downtown OKC Scissortail Park Image">

                    <div class="container">
                        <div class="carousel-caption text-start">
                            <h1>OKC Scissortail Park</h1>
                            <p>Some representative placeholder content for the first slide of the carousel.</p>
                            <p><a class="btn btn-lg btn-primary" href="https://scissortailpark.org/">Learn more</a></p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item carousel-img carousel-img-2"
                    aria-label="Oklahoma City National Memorial Image">


                    <div class="container">
                        <div class="carousel-caption">
                            <h1>Look to the Future, <br>Learn from the Past</h1>
                            <p>The Oklahoma City National Memorial honors the victims, survivors, rescuers, and all who
                                were forever changed on April 19, 1995.</p>
                            <p><a class="btn btn-lg btn-primary" href="https://memorialmuseum.com/">Learn more</a></p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item carousel-img carousel-img-3"
                    aria-label="Oklahoma City National Memorial Image">
                    <div class="container">
                        <div class="carousel-caption text-end">
                            <h1>One more <br>for good measure.</h1>
                            <p>Some representative placeholder content for the third slide of this carousel.</p>
                            <p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>

关于页面 HTML：

<body class="antialiased items-center justify-center w-screen h-screen">
    <!-- Header Section -->
    <header>
        <nav>
            <ul class="nav-list nav-menu">
                <li class="nav-item"><a href="#home"><img class="logo" src="img/heathology-logo-horizontal-white.png"
                            alt="heathology logo"></a></li>
                <li class="nav-item"><a href="/custom-bootstrap/index.html">Home</a></li>
                <li class="nav-item"><a href="/custom-bootstrap/about.html">About</a></li>
                <li class="nav-item"><a href="http://heathology.online">Portfolio</a></li>
                <li class="nav-item"><a href="#contact">Contact</a></li>
                <form class="d-flex" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-primary" type="submit">Search</button>
                </form>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
    </header>
    <!-- Main Page Content -->
    <main>
        <section id="about" class="about">
            <div class="container aos-init aos-animate" data-aos="fade-up">

                <div class="section-title">
                    <h2>About</h2>
                    <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit
                        sint
                        consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea.
                        Quia fugiat
                        sit in iste officiis commodi quidem hic quas.</p>
                </div>

                <div class="section-row">
                    <div class="col-lg-4">
                        <img src="/custom-bootstrap/img/Jesse-Heath-July-2022.jpg" class="img-fluid jesse-photo" alt="">
                    </div>
                    <div class="col-lg-8 pt-4 pt-lg-0 content" style="padding: 20px; margin-top: 40px;">
                        <h2>Jesse Heath</h2>
                        <div class="type-container">
                            <span class="text first-text">I'm a</span>
                            <span class="text second-text">Freelancer</span>
                        </div>
                        <div class="section-row">
                            <div class="col-lg-6">
                                <ul>
                                    <li><i class="bi bi-chevron-right"></i> <strong>Birthday:</strong> <span>September
                                            11, 1985</span>
                                    </li>
                                    <li><i class="bi bi-chevron-right"></i> <strong>Website:</strong>
                                        <span>www.heathology.online</span>
                                    </li>
                                    <li><i class="bi bi-chevron-right"></i> <strong>Phone:</strong> <span>+1 (405) 856
                                            2025</span>
                                    </li>
                                    <li><i class="bi bi-chevron-right"></i> <strong>City:</strong> <span>Oklahoma City,
                                            USA</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-lg-6">
                                <ul>
                                    <li><i class="bi bi-chevron-right"></i> <strong>Age:</strong> <span>37</span></li>
                                    <li><i class="bi bi-chevron-right"></i> <strong>Degrees:</strong> <span>M.A.T.S.;
                                            M.Div. in Church History</span>
                                    </li>
                                    <li><i class="bi bi-chevron-right"></i> <strong>Email:</strong>
                                        <span>[email protected]</span>
                                    </li>
                                    <li><i class="bi bi-chevron-right"></i> <strong>Freelance:</strong>
                                        <span>Available</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <p style="padding-top: 20px;">
                            Officiis eligendi itaque labore et dolorum mollitia officiis optio vero. Quisquam sunt
                            adipisci
                            omnis et ut. Nulla accusantium dolor incidunt officia tempore. Et eius omnis.
                            Cupiditate ut dicta maxime officiis quidem quia. Sed et consectetur qui quia repellendus
                            itaque
                            neque. Aliquid amet quidem ut quaerat cupiditate. Ab et eum qui repellendus omnis culpa
                            magni
                            laudantium dolores.
                        </p>
                    </div>
                </div>

            </div>
        </section>

    </main>

JavaScript

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("active");
  navMenu.classList.toggle("active");
});

document.querySelectorAll(".nav-link").forEach((n) =>
  n.addEventListener("click", () => {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
  })
);

我尝试添加一个 z-index：999；到我的导航栏/导航菜单类，但这没有用。关于如何解决这个问题有什么建议吗？

Answer 1

您能否向我们展示您元素的 HTML 和 CSS，因为我们无法那样帮助您。

你确定你的菜单显示了吗？您的控制台中有任何 JS 错误吗？