0
我在我的網站上有一個響應式菜單。現在我正試圖通過媒體查詢使網站的其他部分響應。響應式菜單不適用於媒體查詢
我添加了這2個媒體查詢，但之後，響應菜單不再工作，我不知道爲什麼。
@media（最小寬度：768px）和（最大寬度：980px）
@media（最大寬度：767px）
這是用於菜單的代碼：
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
<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()">☰</a>
</div>
JS
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
這是我添加了使網站響應代碼：
@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;
}
}
在這之後，響應菜單不工作了。
如果我刪除最後一個代碼，響應菜單會恢復正常工作。
這哪裏是類HTML'文本頭div'？並請妥善解釋問題。 – Phantom
html中的text-head-div元素在哪裏？ –