Проблемы с переключением гамбургер-меню и меню большого размера в зависимости от размеров экрана с использованием структуры верхней панели zurb-foundation. Я получаю обе верхние панели одну под другой, независимо от размера экрана.

Я попытался изменить порядок загрузки файлов java-скриптов для основы, но не повезло. Я перечитал документы миллион раз и просто не могу найти проблему. Я даже закомментировал всю верхнюю панель, скопировал и вставил ее с сайта фонда, и получилось то же самое.

В чем я думаю может быть проблема: - поскольку то же самое происходит с точным кодом из документов zurb-foundation, мне интересно, в том ли порядке я ставлю свои скрипты в очередь в файле functions.php для WordPress, буду признателен за свежий взгляд.

<div class = "title-bar" data-responsive-toggle = "responsive_menu" data-hide- 
    for = "large">
    <button class = "menu-icon" type = "button" data-toggle></button>
    <div class = "title-bar-title"></div>
</div>


<div class = "top-bar" id = "responsive_menu">
    <div class = "top-bar-left">
        <ul class = "medium-horizontal menu">
            <li class = "menu-text">Save on Experiences</li>
        </ul>
    </div>
    <div class = "top-bar-right">
        <ul class = "medium-horizontal menu">
            <li><a href = "#">Featured Discounts</a></li>
            <li><a href = "#">Experiences</a></li>
            <li><a href = "#">Reviews</a></li>
            <li><a href = "#">About Us</a></li>
            <li><a href = "#">Support</a></li>
            <li><a href = "#">News</a></li>
        </ul>
    </div>

</div>

вырезка из functions.php

wp_enqueue_style('layout', get_template_directory_uri() . '/assets/css/foundation.min.css'); wp_enqueue_script('foundation-script-min', get_template_directory_uri() . '/assets/js/vendor/foundation.min.js', '', '', true); wp_enqueue_script('foundation-script-jquery', get_template_directory_uri() . '/assets/js/vendor/jquery.js', '', '', true); wp_enqueue_script('foundation-script-whatinput', get_template_directory_uri() . '/assets/js/vendor/what-input.js', '', '', true);

Функциональность, которую я хочу:

• на маленьких экранах пользователь просматривает только гамбургер-меню
• на экранах среднего и большого размера пользователь не видит гамбургер-меню и имеет верхнюю панель подходящего размера.

Функционал на данный момент:

• функция переключения между полноразмерным меню и меню размера гамбургера не работает
• Я получаю оба верхних бара один под другим, независимо от размера экрана