问添加一定屏幕大小的汉堡包菜单并移除导航元素。
EN

Stack Overflow用户

提问于 2022-07-11 10:35:12

回答 1查看 202关注 0票数 0

我有一个带有汉堡包菜单的导航元素，它隐藏在桌面屏幕上，但当我到达平板电脑和移动设备时，我希望这个导航元素被隐藏，汉堡包菜单显示，但它不起作用。我用的是sass顺便说一下，这不重要，但值得一提的是

// FILE CONTAINING THE HEADER

.header__content {
  height: 9.6rem;
  padding: 3.6rem 2.4rem;
  position: relative;

  .nav {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $margin-2;

    .nav__list {
      display: flex;
      align-items: center;
      list-style: none;
      gap: 3rem;
    }

    .nav__items {
      cursor: pointer;
    }

    .nav__items:hover {
      color: $color-nav;
      transition: all 0.2s;
    }

    .nav__right {
      .nav__btn-register {
        margin-top: 0;
        border: 2px solid $color-grey-dark-2;
        border-radius: 15px;
        padding: 1em 2em;

        /* Put transition on original "state" */
        /* transition: background-color 0.3s; */
        transition: all 0.3s;
      }

      .nav__btn-register:hover {
        background-color: $bgC-1;
        color: $color-btn;
      }
    }

    .nav__left {
      .nav__logo {
        padding: $pd-1 $pd-1 0 0;

        img {
          height: 2em;
        }
      }

      .nav__card {
        position: absolute;
        background-color: $bgC-card;
        top: 2.4rem;
        right: 1.2rem;
        border-radius: 5px;
        box-shadow: -1px 13px 42px -15px rgba(0, 0, 0, 0.47);
        -webkit-box-shadow: -1px 13px 42px -15px rgba(0, 0, 0, 0.47);
        -moz-box-shadow: -1px 13px 42px -15px rgba(0, 0, 0, 0.47);
      }
    }

    .btn-mobile-nav {
      cursor: pointer;
      display: none;
    }

    .nav__menu-list {
      position: relative;

      // DROPDOWN ELEMENTS
      .dropdown__list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        list-style: none;
        font-size: $fs-00;
        justify-items: flex-start;

        .nav__menu-items {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 0.8rem;
        }
      }
    }

    .nav__company {
      padding: 1.5rem;
      width: 8rem;
    }

    .nav__features {
      padding: 1.5rem 1.5rem;
    }

    .nav__company-items:hover,
    .nav__features-items:hover {
      transform: scale(1.05);
      transition: all 0.1s;
    }
  }
}

// RESPONSIVE SASS FILE

$bp-Xlarge: 87.5em; // 1400px
$bp-large: 78.15em; // 1250px
$bp-mlarge: 65.625em; // 1050px
$bp-medium: 61.25em; // 980px

// Tablet
$bp-medium2: 55em; //880px
$bp-small: 47.75em; // 764px
$bp-small2: 37.5em; // 600px
$bp-smallest: 31.25em; // 500px

@media screen and (max-width: $bp-large) {
  html {
    font-size: 80%;
    transition: all 0.3s ease-in-out;
  }

  .nav {
    .nav__right,
    .nav__left {
      gap: 2.5rem;
    }
  }

  .hero__left {
    .hero__txt-header {
      font-size: $fs-2a;
    }
  }
}

@media screen and (max-width: $bp-mlarge) {
  html {
    font-size: 72%;
  }

  .hero__left {
    .hero__txt-header {
      font-size: $fs-3;
    }
  }

  .nav {
    .nav__right,
    .nav__left {
      gap: 1.8rem;
    }
  }

  .hero__left {
    .btn__learn {
      padding: 1.4rem 3rem;
    }
  }
}

@media screen and (max-width: $bp-medium) {
  html {
    font-size: 65%;
  }

  .grid {
    gap: 5.5rem;
  }

  .hero__left {
    .hero__txt-header {
      font-size: $fs-3a;
    }

    .btn__learn {
      padding: 1.4rem 3.5rem;
    }
  }
}

@media screen and (max-width: $bp-medium2) {
  html {
    font-size: 60%;
  }

  .nav {
    // margin: $margin-1 $margin-2;
    // justify-content: flex-end;

    .nav__items,
    .nav__right {
      display: none;
    }

    .nav__logo {
      display: block;
    }
  }

  .btn-mobile-nav {
    z-index: 9999;
    display: block;

    .btn__open {
      display: block;
    }
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/src/images/favicon-32x32.png"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="src/sass/main.scss" />
    <script defer src="/src/main.js"></script>

    <title>Frontend Mentor | Intro section with dropdown navigation</title>

    <!-- Feel free to remove these styles or customise in your own stylesheet  -->
  </head>
  <body>
    <header class="header__content">
      <nav class="nav">
        <div class="nav__left">
          <ul class="nav__list nav__left-list">
            <li class="nav__logo nav__items">
              <img src="/src/images/logo.svg" alt="Logo icon" />
            </li>
            <li class="nav__items nav__menu-list">
              Features
              <img
                src="/src/images/icon-arrow-down.svg"
                alt="arrow down icon"
              />
              <ul class="dropdown__list nav__card nav__features">
                <li class="nav__menu-items">
                  <img
                    class="dropdown__img"
                    src="/src/images/icon-todo.svg"
                    alt=""
                  />
                  Todo List
                </li>
                <li class="nav__menu-items">
                  <img
                    class="dropdown__img"
                    src="/src/images/icon-calendar.svg"
                    alt=""
                  />
                  Calendar
                </li>
                <li class="nav__menu-items">
                  <img
                    class="dropdown__img"
                    src="/src/images/icon-reminders.svg"
                    alt=""
                  />
                  Reminder
                </li>
                <li class="nav__menu-items">
                  <img
                    class="dropdown__img"
                    src="/src/images/icon-planning.svg"
                    alt=""
                  />
                  Planning
                </li>
              </ul>
            </li>
            <li class="nav__items nav__menu-list">
              Company
              <img
                src="/src/images/icon-arrow-down.svg"
                alt="arrow down icon"
              />

              <ul class="dropdown__list nav__card nav__company">
                <li>History</li>
                <li>Our Team</li>
                <li>Blog</li>
              </ul>
            </li>
            <li class="nav__items">Careers</li>
            <li class="nav__items">About</li>
          </ul>
        </div>

        <div class="nav__right">
          <ul class="nav__list nav__right-list">
            <li class="nav__items">Login</li>
            <li class="nav__items nav__btn-register">Register</li>
          </ul>
        </div>

        <div class="btn-mobile-nav">
          <img
            class="btn__open"
            src="/src/images/icon-menu.svg"
            alt="menu outline"
          />
          <img
            class="btn__close"
            src="/src/images/icon-close-menu.svg"
            alt="close menu outline"
          />
        </div>
      </nav>
    </header>

请帮帮我，我不知道我哪里出了问题

html

sass

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-07-11 12:49:27

看起来样式是存在的，但它会被以前的display: none;样式覆盖。

在scss的最后一部分

.btn-mobile-nav {
    z-index: 9999;
    display: block !important; // <--- add important

    .btn__open {
      display: block;
    }
}

当用户在一个小视图中时，我可以看到已经隐藏的页面。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72937200

复制

相似问题

问添加一定屏幕大小的汉堡包菜单并移除导航元素。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问添加一定屏幕大小的汉堡包菜单并移除导航元素。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问添加一定屏幕大小的汉堡包菜单并移除导航元素。
EN