Как ограничить ширину фиксированной панели меню при прокрутке?

Вопрос или проблема

Моя основная панель меню имеет прозрачный фон. Чтобы меню всегда было видно поверх всего, я искал решение и нашел два кода, которые вы видите ниже. Этот код работает хорошо, за исключением ширины панели меню.

Фиксированная панель меню при прокрутке должна быть уменьшена до размера страницы (максимальная ширина 1200px). В данный момент эта панель меню имеет ширину экрана.

Чтобы получить фиксированную полупрозрачную панель меню (видимую только при прокрутке!), я использовал эти коды: Первый код в моем модифицированном style.css (строка 1199):

.nav-secondary {
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 16px;
    display: none;
    position: fixed;
    width: 100%;
    z-index: 999;
}

Второй код в модифицированном functions.php:

//* Перемещение основной навигации
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_header', 'genesis_do_nav' );

//* Подключение скрипта липкого меню
add_action( 'wp_enqueue_scripts', 'sp_enqueue_script' );
function sp_enqueue_script() {
wp_enqueue_script( 'sample-sticky-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/sticky-menu.js', array( 'jquery' ), '1.0.0' );
}
//* Перемещение меню вторичной навигации
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_before', 'genesis_do_subnav' );

Как видно в css-коде, ширина установлена на 100%. Я пробовал 1200px, но это здесь не работает. Я хотел бы иметь адаптивное решение.

Я использую тему LifeStyle Pro Child. В данный момент на моем тестовом сайте: http://www.official.jungvital.com

Спасибо всем за помощь в этом случае!

С уважением, Рейнер

У тебя есть другой div, который контролирует фон на всю ширину. Тебе нужно изменить CSS этого div, если хочешь изменить ширину. Этот CSS убирает фон из полного div и добавляет фон в обертку div, который имеет максимальную ширину 1200px;

.lifestyle-pro-blue .nav-secondary {background:none;} .wrap{background-color:rgba(0,0,0,0.5);}

Ответ или решение

Чтобы ограничить ширину фиксированной меню-бары при прокрутке на вашем сайте, необходимо внести изменения в стили и структуру HTML, используемые на странице. В данной ситуации мы рассмотрим, как адаптировать CSS и JavaScript для достижения необходимого эффекта.

Шаги для адаптации меню-бары:

Изменение CSS:

В вашем коде CSS для .nav-secondary ширина установлена как width: 100%;, что заставляет элемент растягиваться на всю ширину экрана. Чтобы сделать меню отзывчивым и ограничить его ширину до 1200 пикселей, используйте следующие стили:
```
.nav-secondary {
   background-color: rgba(0, 0, 0, 0.5);
   color: #fff;
   font-size: 16px;
   display: none;
   position: fixed;
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   left: 0;
   right: 0;
   z-index: 999;
}
```
Изменение здесь заключается в добавлении max-width: 1200px; и использовании margin: 0 auto;, что центрирует элемент на странице при размере не более 1200 пикселей.
Адаптация HTML Структуры:

Убедитесь, что меню обернуто в элемент, который позволяет ограничить его ширину. Проверьте, соответствует ли структура HTML подобной:
```
<div class="nav-container">
   <nav class="nav-secondary">
       
   </nav>
</div>
```

Изменение JS-файла sticky-menu.js:

Включите логику, чтобы меню появлялось при прокрутке. Убедитесь, что sticky-menu.js управляет началом прокрутки:

jQuery(document).ready(function($) {
   var nav = $('.nav-secondary');
   $(window).on('scroll', function() {
       if($(this).scrollTop() > 50) {
           nav.fadeIn(); // Показываем меню при прокрутке
       } else {
           nav.fadeOut(); // Скрываем меню в начале
       }
   });
});

SEO-оптимизация и отзывчивый дизайн:

Убедитесь, что ваш сайт оптимизирован для SEO: добавьте alt-теги к изображениям, оптимизируйте метаописания и заголовки страниц. Также убедитесь, что меню-бара и весь сайт адаптированы для мобильных устройств и различных экранов.
Обновление функции вставки стилей:

Обновите функцию, добавленную в functions.php, чтобы стили применялись как следует:
```
add_action('wp_enqueue_scripts', 'sp_enqueue_styles');
function sp_enqueue_styles() {
   wp_enqueue_style('child-theme', get_stylesheet_directory_uri() . '/style.css');
}
```

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