汉堡按钮显示不变

Question

我希望在我的屏幕尺寸小于 1023 像素时显示汉堡。

只有在使用媒体查询时才会发生

.burger {
  display: none;
  position: absolute;
  cursor: pointer;
  right: 5%;
  top: 15px;
  font-size: 25px;
  background: none;
  border: none;
}


@media only screen and (max-width: 1053px) {
  .burger {
    display: block;
  }
}

<button
  type="button"
  class="burger"
  data-toggle="collapse"
  data-target="#myNavbar"
>
  &#9776;
</button>

但是汉堡图标没有出现，虽然我已经尝试从 span 和我标记创建汉堡

Answer 1

在 codepen 上测试时，这对我来说似乎非常有效。你能检查一下你的样式表是如何在你的 HTML 文档中连接的吗，就像这段代码一样。

    <link rel="stylesheet" href="stylesheet.css"></link>

在您的 html 文档的 <head> 部分。我感觉可能连接不上

编辑

html

<button
    type="button"
    id="burger"
    data-toggle="collapse"
    data-target="#myNavbar"
        >
          &#9776;
</button>

CSS

#burger {
    display: none;
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 15px;
    font-size: 25px;
    background: none;
    border: none; 
}

@media screen and (max-width: 1053px) {
      #burger {
        display: block;
   
    }
}

汉堡按钮显示不变

Burger Button Display Not changing

html

javascript

css

web

responsive