Стили медиа-запросов CSS не будут применяться при изменении размера области просмотра

Question

Медиа-запросы для адаптивного меню не работают. Исходное меню представляет собой горизонтальный, поровну разделенный набор вкладок. Мне нужно показать значок стека / бургера в верхнем левом углу при просмотре на мобильном устройстве (<600px в приведенном ниже коде), который отображается в виде меню с полной страницей по всей странице ... например, полноэкранный div на 2 для z-индекса. </p>

Я попытался изменить минимальную и максимальную ширину и попытался просмотреть это на реальных устройствах, а также на встроенных в браузер инструментах / симуляторах для разработчиков ... без изменений, значок стека, который будет отображать меню поверх вся страница на мобильных устройствах не отображается ... вместо этого остается видимым исходное (горизонтальное, полноширинное) меню (#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">
            &nbsp;
        </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 пикселей) </p>

Фактический результат: буквально ничего не происходит!

Answer 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>