如何防止我的導航菜單在移動視圖中覆蓋我的網站內容？

Question

當我將屏幕縮小到移動設備時，我當前的導航菜單會覆蓋我的網站內容。 此外，每個菜單項都有可滾動的鏈接，所以每當我點擊一個選項時，它都會向下滾動到網站上的那個部分。

我的問題是我的標題（例如“第 1 節”）被我的菜單覆蓋。

這是我當前的@media 代碼，它將每個菜單項堆疊在一起。

@media only screen and (max-width: 850px) {
  .menu-items {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    height: 5px;
  }
}

這是第一部分的 HTML

<body>
    <header class="page__header">
      <nav class="navbar__menu">
        <!-- Navigation starts as empty UL that will be populated with JS -->
        <ul id="navbar__list"></ul>
      </nav>
    </header>
    <main>
      <header class="main__hero">
        <h1>Landing Page</h1>
      </header>

I

    <section id="section1" data-nav="Section 1" class="active">
      <div class="landing__container">
        <h2>Section 1</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          fermentum metus faucibus
        </p>

        <p>
          Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar
          gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam.
          Cras eu tincidunt arcu,
        </p>
      </div>
    </section>

是否有一個簡單的修復程序來確保我的菜單將任何 HTML 內容推送到它下面？

這是我使用 Javascript 創建導航菜單的方法

const navMenu = document.querySelectorAll("section");
const navList = document.getElementById("navbar__list");
const items = ["Section 1", "Section 2", "Section 3", "Section 4"];

items.forEach((item, i) => {
  const el = document.createElement("a");
  el.innerText = item;
  el.classList.add("menu-items");
  el.setAttribute("id", `menu-${i + 1}`);
  el.href = `#section${i + 1}`;
  navList.appendChild(el);
});

這是導航欄和頁面 header 的 CSS

.navbar__menu ul {
  padding-left: 0;
  margin: 0;
  text-align: right;
}

.navbar__menu li {
  display: inline-block;
}

.navbar__menu .menu__link {
  display: block;
  padding: 1em;
  font-weight: bold;
  text-decoration: none;
  color: #000;
}

.navbar__menu .menu__link:hover {
  background: #333;
  color: #fff;
  transition: ease 0.3s all;
}

/* Header Styles */
.page__header {
  background: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 5;
}

Answer 1

問題是.page_header 。 它有一個position: fixed 。 這將導致您的 div 和其中的所有內容顯示在頁面的 rest 上方。 為什么？ 這是 CSS 定位的優秀指南。

要解決您的問題，這實際上取決於您希望設計的外觀。

您可以將<ul id="navbar__list"></ul>移到 header 之外。
您可以將.page__header class 更改為靜態定位在@media查詢下。 這樣它就固定在大屏幕上，而在小屏幕上正常。
您可以考慮保持原樣（我看到許多移動應用程序都使用這種設計，這並不奇怪），但可以切換菜單（根據導航欄中的按鈕顯示/隱藏），並且當菜單中的項目被點擊，菜單被隱藏。

如何防止我的導航菜單在移動視圖中覆蓋我的網站內容？

問題描述

1 個解決方案

解決方案1
0 2020-04-06 04:33:11

如何防止我的導航菜單在移動視圖中覆蓋我的網站內容？

問題描述

1 個解決方案

解決方案1 0 2020-04-06 04:33:11

解決方案1
0 2020-04-06 04:33:11