我有一个汉堡包菜单的导航元素，这是隐藏在桌面屏幕大小，但当我得到平板电脑和移动设备，我希望这个导航元素被隐藏和汉堡包菜单显示，但它不工作。我正在使用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>请帮帮我，我不知道哪里出错了
看起来样式就在那里，但是它被之前的display: none;样式覆盖了。
在你的scss的最后一部分
.btn-mobile-nav {
z-index: 9999;
display: block !important; // <--- add important
.btn__open {
display: block;
}
}
我可以看到页面已经隐藏当用户在一个小视窗