响应式菜单不适用于媒体查询

Question

I have a responsive menu on my website. 我的网站上有一个响应式菜单。 Now I'm trying to make responsive also the others parts of the website with media queries. 现在，我正尝试通过媒体查询来响应网站的其他部分。

I added this 2 media queries but after that, the responsive menu doesn't work anymore and I don't know why. 我添加了这2个媒体查询，但是此后，响应菜单不再起作用，我也不知道为什么。

@media (min-width: 768px) and (max-width: 980px) @media（最小宽度：768像素）和（最大宽度：980像素）

@media (max-width: 767px) @media（最大宽度：767px）

This is the code for the menu: 这是菜单的代码：

CSS CSS

.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden; /*overflow help you to create a new row below because you used float left*/
    background-color: #f6f6f6;
    border: 1px solid #d1d1d1;
}

.topnav a {

    float: left;
    border-left: 1px solid #d1d1d1;
    display: block; /*"li a" is an inline element by default so we have to convert it in block element for modify the layout*/
    color: #0099cc;
    text-align: center;
    padding: 14px 22px;
    text-decoration: none;
}


.topnav .active {
    background-color: #f29323;
    color: #ffffff;
}

.topnav a:hover {
    text-decoration: none;
}


.topnav a:hover:not(.active) {
    background-color: #f29323;
    color: #fff;
    text-decoration: none;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a {
      display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 600px) {
  .topnav.responsive {
      position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}

@media screen and (max-width: 600px) {
  .topnav {
    padding: 0 0;
  }
}

HTML HTML

<div class="topnav" id="myTopnav">
    <a <?php echo ($page == "information") ? "class='active'" : ""; ?> href="/nutickets2/index.php">INFORMATION</a>
    <a <?php echo ($page == "report") ? "class='active'" : ""; ?> href="/nutickets2/report.php">Tickets</a>
    <a href="">Info</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

JS JS

    <script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
    </script>

This is the code that I added for making the site responsive: 这是我为使网站具有响应性而添加的代码：

@media (min-width: 768px) and (max-width: 980px) {

.text-head-div div {
    display: block;
}

.text-head-div span {
    display: block;
}
}

@media (max-width: 767px) {

.text-head-div div {
    display: block;
}

.text-head-div span {
    display: block;
}
}

After that, the responsive menu doesn't work anymore. 此后，响应菜单不再起作用。

If I delete the last code the responsive menu restar to works. 如果删除最后一个代码，响应菜单将重新启动。

Answer 1

What does the text-head-div element look like? text-head-div元素是什么样的？ Does it or its children have any fixed width elements? 它或其子级是否具有任何固定宽度的元素？

Code embedded in HTML snippet for easy testing: 嵌入HTML代码段中的代码可轻松进行测试：

 <!DOCTYPE html> <html> <head> <style type="text/css"> .topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; /*overflow help you to create a new row below because you used float left*/ background-color: #f6f6f6; border: 1px solid #d1d1d1; } .topnav a { float: left; border-left: 1px solid #d1d1d1; display: block; /*"li a" is an inline element by default so we have to convert it in block element for modify the layout*/ color: #0099cc; text-align: center; padding: 14px 22px; text-decoration: none; } .topnav .active { background-color: #f29323; color: #ffffff; } .topnav a:hover { text-decoration: none; } .topnav a:hover:not(.active) { background-color: #f29323; color: #fff; text-decoration: none; } .topnav .icon { display: none; } @media screen and (max-width: 600px) { .topnav a { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive { position: relative; } .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } @media screen and (max-width: 600px) { .topnav { padding: 0 0; } } @media (min-width: 768px) and (max-width: 980px) { .text-head-div div { display: block; } .text-head-div span { display: block; } } @media (max-width: 767px) { .text-head-div div { display: block; } .text-head-div span { display: block; } } </style> <title></title> </head> <body> <div class="topnav" id="myTopnav"> <a href="/nutickets2/index.php">INFORMATION</a> <a class="active" href="/nutickets2/report.php">Tickets</a> <a href="">Info</a> <a class="icon" href="javascript:void(0);" onclick="myFunction()" style="font-size:15px;">&#9776;</a> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </body> </html>

响应式菜单不适用于媒体查询

问题描述

1 个解决方案

解决方案1
0 2017-06-19 12:03:11

响应式菜单不适用于媒体查询

问题描述

1 个解决方案

解决方案1 0 2017-06-19 12:03:11

解决方案1
0 2017-06-19 12:03:11