媒体查询中的响应式菜单不起作用。原始菜单是一组水平的，等分的选项卡。在移动设备上查看时，我需要在左上角显示一个堆栈/汉堡图标（在下面的代码中<600px），该图标显示为整个页面的全页居中菜单...例如，全屏div z-index为2。
我尝试更改最小和最大宽度，并尝试在实际设备以及浏览器内置的开发人员工具/模拟器上查看此宽度...不变，一个堆栈图标将在移动设备上的整个页面都不会显示...而是原始（水平，全角）菜单保持可见状态（#menu_row和.menu_row）。
@media screen and (min-width: 0px) and (max-width: 600px) {
#small_menu_row.small_menu_row {
//responsive menu
display: block;
z-index: 2;
text-align: center;
}
#menu_row.menu_row {
//regular menu
display: none;
z-index: 2;
text-align: center;
}
}
@media screen and (min-width: 601px){
#small_menu_row.small_menu_row{ //responsive menu
display:none;
z-index:2;
text-align:center;
}
#menu_row.menu_row{ //regular menu
display:block;
z-index:2;
text-align:center;
}
} <div class="container-fluid" id="outer_most">
<div class="row blank_row">
<div class="col">
</div>
</div>
<div class="row small_menu_row" id="small_menu_row">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<img src="<?php echo wp_get_upload_dir()['baseurl'];?>/stack.png">
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link menu-link" href="<?php echo get_site_url()?>/home">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link" href="<?php echo get_site_url()?>/trafat">A SAMPLE TITLE</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link" href="<?php echo get_site_url()?>/estore">e-STORE</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link" href="<?php echo get_site_url()?>/works">
<div class="dropdown">
WORKS
<!--div class="dropdown-content">
<?php /*
$args = array("child_of"=>9, "sort_column"=>"menu_order", "sort_order"=>"ASC");
$pages = get_pages($args);
$count=0;
foreach($pages as $page){
echo "<a href=\"".get_site_url()."/works/".$page->post_name."\" class=\"book_row\" \">"
.$page->post_title.
"</a>";
$count++;
}
*/ ?>
</div-->
<div class="dropdown-content">
<a href="<?php echo get_site_url()?>/archives/aotr" class="book_row">
A SAMPLE TITLE
</a>
<a href="<?php echo get_site_url()?>/archives/a_v" class="book_row">
A SAMPLE TITLE
</a>
<span <!--href="<?php echo get_site_url()?>/archives/gallery"--> class="book_row">
A SAMPLE TITLE
</span>
<span <!--href="<?php echo get_site_url()?>/archives/performances"--> class="book_row">
A SAMPLE TITLE
</span>
</div>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link" href="<?php echo get_site_url()?>/archives">
<div class="dropdown">
ARCHIVES
<div class="dropdown-content">
<a href="<?php echo get_site_url()?>/archives/aotr" class="book_row">
ARTICLES
</a>
<a href="<?php echo get_site_url()?>/archives/a_v" class="book_row">
AUDIO / VISUAL
</a>
<a href="<?php echo get_site_url()?>/archives/gallery" class="book_row">
IMAGE GALLERY
</a>
<a href="<?php echo get_site_url()?>/archives/performances" class="book_row">
PERFORMANCES
</a>
<a href="<?php echo get_site_url()?>/archives/events" class="book_row">
EVENTS
</a>
</div>
</div>
</a>
</li>
<!--li class="nav-item">
<a class="nav-link menu-link" href="<?php /*echo get_site_url()*/?>/forum">FORUM</a>
</li-->
<li class="nav-item">
<a class="nav-link menu-link" href="<?php echo get_site_url()?>/about">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link" href="<?php echo get_site_url()?>/contact">CONTACT</a>
</li>
</ul>
<!--ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul-->
</div>
</div>
</nav>
</div>
<div class="row logo_row" id="logo_row">
<img src="<?php echo wp_upload_dir()['baseurl']; ?>/t2.png" id="img_2">
</div>
<div class="row blank_row">
<div class="col">
<br>
<br>
</div>
</div>
<div class="row menu_row" id="menu_row">
<div class="col col-xl-2 col-lg-2 col-md-1 col-sm-1">
</div>
<div class="col col-xl-8 col-lg-8 col-md-10 col-sm-10" id="act_menu">
<ul class="nav justify-content-between">
<li class="nav-item">
<a class="nav-link menu-link" href="<?php echo get_site_url()?>/home">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link" href="<?php echo get_site_url()?>/trafat">A SAMPLE TITLE</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link" href="<?php echo get_site_url()?>/works">
<div class="dropdown">
WORKS
<!--div class="dropdown-content">
<?php /*
$args = array("child_of"=>9, "sort_column"=>"menu_order", "sort_order"=>"ASC");
$pages = get_pages($args);
$count=0;
foreach($pages as $page){
echo "<a href=\"".get_site_url()."/works/".$page->post_name."\" class=\"book_row\" \">"
.$page->post_title.
"</a>";
$count++;
}
*/ ?>
</div-->
<div class="dropdown-content">
<a href="<?php echo get_site_url()?>/works/SAMPLETITLE" class="book_row">
A SAMPLE TITLE
</a>
<a href="<?php echo get_site_url()?>/works/SAMPLETITLE" class="book_row">
A SAMPLE TITLE
</a>
<a href="#" class="book_row">
A SAMPLE TITLE
</a>
<a href="#" class="book_row">
A SAMPLE TITLE
</a>
</div>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link" href="<?php echo get_site_url()?>/archives">
<div class="dropdown">
ARCHIVES
<div class="dropdown-content">
<a href="<?php echo get_site_url()?>/archives/aotr" class="book_row">
ARTICLES
</a>
<a href="<?php echo get_site_url()?>/archives/a_v" class="book_row">
AUDIO / VIDEO
</a>
<a href="<?php echo get_site_url()?>/archives/gallery" class="book_row">
IMAGE GALLERY
</a>
<a href="<?php echo get_site_url()?>/archives/performances" class="book_row">
PERFORMANCES
</a>
<a href="<?php echo get_site_url()?>/archives/events" class="book_row">
EVENTS
</a>
</div>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link" href="<?php echo get_site_url()?>/estore">e-STORE</a>
</li>
<!--li class="nav-item">
<a class="nav-link menu-link" href="<?php /*echo get_site_url()*/?>/forum">FORUM</a>
</li-->
<li class="nav-item">
<a class="nav-link menu-link" href="<?php echo get_site_url()?>/about">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link" href="<?php echo get_site_url()?>/contact">CONTACT</a>
</li>
</ul>
</div>
<div class="col col-xl-2 col-lg-2 col-md-1 col-sm-1">
</div>
</div>
在JSFiddle上有相同的代码：http://jsfiddle.net/zL9cfoj7
预期结果：在移动设备上查看（或宽度<600像素）时，常规菜单将隐藏并显示堆栈图标
实际结果：实际上什么也没发生！
答案 0 :(得分：1)
您似乎正在使用Bootstrap-为什么不使用内置的显示类来处理隐藏/显示？
<!-- visible only on screen size < 576px -->
<div class="row small_menu_row d-block d-sm-none" id="small_menu_row">
...
</div>
<!-- hidden on screen size < 576px, otherwise visible -->
<div class="row menu_row d-none d-sm-block" id="menu_row">
...
</div>