/* ========================================================================== ПРАВКИ 31.08.2026 1. Липкая шапка не меняется при прокрутке (десктоп) 2. Планшет 768-1199: одинаковая шапка на всех разрешениях 3. Эмодзи у пунктов меню - на десктопе, планшете и в гамбургере Откат: удалить всё от этой рамки до конца файла. Копия до правки: /home/backup/tourday-style-31aug/style.css ========================================================================== */ /* -------------------------------------------------------------------------- 1. ЛИПКАЯ ШАПКА (десктоп, от 1200px) Было: у .site-header отступы 20px, а у .site-header.fixed - 5px. При прокрутке шапка сжималась с 94px до 64px, причём с анимацией transition: .6s, из-за чего она заметно "переезжала" на глазах. Именно это и выглядело как "обрезается снизу". Стало: отступы в обоих состояниях одинаковые, анимации нет. Плюс распорка. Шапка с position: fixed уходит из потока, и всё содержимое подпрыгивает вверх ровно на её высоту. Компенсируем отступом сверху у #content - он идёт следом за шапкой, а элементы между ними нулевой высоты. Величину берём не числом, а из переменной --tourday-header-h: её выставляет скрипт в functions.php по реальной высоте шапки. Жёсткое число врало бы на тех ширинах, где шапка выше. -------------------------------------------------------------------------- */ @media (min-width: 1200px) { /* Правка 31.08.2026, вторая итерация: шапка на десктопе была сочтена слишком высокой. Убрано по 3 мм сверху и снизу - при стандартных 96 точках на дюйм это ~11px, отступы 20px стали 9px. Высота шапки: 94px -> 72px. Задаём обоим состояниям сразу, а не только липкому. Если убрать отступы лишь у .fixed, шапка снова начнёт сжиматься при прокрутке - ровно то, с чего эта правка начиналась. */ .site-header, .site-header.fixed { padding-top: 9px !important; padding-bottom: 9px !important; transition: none !important; } } /* -------------------------------------------------------------------------- 1a. РАСПОРКА ПОД ЛИПКОЙ ШАПКОЙ (от 768px) Шапка с position: fixed уходит из потока, и всё содержимое подпрыгивает вверх ровно на её высоту - на десктопе это 72px, на планшете 59px. Компенсируем отступом сверху у #content: он идёт следом за шапкой, а элементы между ними нулевой высоты. Высоту берём из переменной, а не числом: она зависит от ширины окна. Переменную выставляет скрипт из functions.php. Ниже 768px не трогаем: там своя механика с .mobile-menu-placeholder. -------------------------------------------------------------------------- */ @media (min-width: 768px) { .site-header.fixed ~ #content { margin-top: var(--tourday-header-h, 94px); } } /* -------------------------------------------------------------------------- 2. ПЛАНШЕТ 768-1199 Было три разных шапки вместо одной: 768px (iPad Mini) - мобильная вёрстка: логотип растянут на 559px, иконка телеграма, высота 117px. Причина: блок max-width:787px захватывал 768px. 820-992 (iPad Air) - эталон: гамбургер, логотип, кнопка. Высота 64px. 1024px (iPad Pro) - десктопная вёрстка: горизонтальное меню, логотип сжат до 82px. Причина: планшетный блок кончался на 992px. Стало: во всём диапазоне 768-1199 вёрстка как на iPad Air. Почему верхняя граница 1199, а не 1024. На 1100-1366 шапка не влезала в строку и разъезжалась на две (высота 148px вместо 59px) - под это попадают планшеты в альбомной ориентации: iPad Air 1180, iPad Pro 11" 1194. Граница 1200 - собственная десктопная граница темы: именно с неё контейнер получает max-width 1190px. Про телефоны. Их показывалось два на ВСЕХ ширинах. Правило .desctop { display: none } существовало, но проигрывало по специфичности правилу .site-header .header-html-1 span { display: block } (0,1,0 против 0,2,1). То есть скрытие второго телефона не работало никогда. Здесь селектор специфичнее. -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { /* Высота шапки одинаковая в обычном и липком состоянии */ .site-header, .site-header.fixed { padding-top: 10px !important; padding-bottom: 10px !important; transition: none !important; } /* Иконка телеграма в шапке - только для телефонов */ .mobile-header-telegram { display: none !important; } /* Логотип не растягивается на всю строку */ .site-branding { width: auto !important; margin-bottom: 0 !important; padding-left: 15px; padding-right: 15px; } /* Логотип не исчезает у прилипшей шапки */ .site-header.fixed .site-branding { display: flex !important; } /* Один телефон вместо двух: МТС убираем, остаётся A1 */ .site-header .header-html-1 span.desctop { display: none !important; } .site-header .header-html-1 div { font-size: 18px; } /* На 768px телефон срывался на вторую строку, и шапка становилась 86px вместо 59px. Считаем: внутренняя ширина 753px, боковые отступы по 45px, значит содержимому остаётся 663px, а нужно ему 671px - не хватало ровно восьми пикселей. Уменьшаем отступы, и заодно делаем их одинаковыми на всём планшетном диапазоне. */ .site-header-inner { padding-left: 20px !important; padding-right: 20px !important; } } /* -------------------------------------------------------------------------- 2a. ГАМБУРГЕР НА 993-1199 Своя механика мобильного меню у темы описана в блоке max-width:992px: исходную навигацию она прячет, а в .mobile-menu-placeholder кладёт её копию нулевой высоты, которая и раскрывается по клику на гамбургер. Раз планшетный диапазон расширен до 1199, эти же условия нужны и на 993-1199. Повторяем ровно то, что тема делает ниже 992 - не больше: правила содержимого из того блока (сетки faq, .child-cat) не трогаем, чтобы не менять раскладку страниц. ВАЖНО: .main-navigation здесь НЕ показываем. Показать её - значит вывести меню раскрытым прямо в шапке. Так и вышло в первой версии этой правки: на планшете меню открывалось само. -------------------------------------------------------------------------- */ @media (min-width: 993px) and (max-width: 1199px) { .top-menu { display: none; } .site-header .hamb_wrap, .humburger, .main-navigation ul li.only-hamburger { display: block; } .mobile-menu-placeholder { display: block; position: absolute !important; width: 100%; top: 92px; z-index: 999; } .mobile-menu-placeholder.fixedm { position: fixed !important; top: 43px; } .mobile-menu-placeholder.open { margin-top: 0; } .main-navigation { margin-bottom: 0; } /* Ниже 992 тема раскладывает пункты в столбик, выше - в строку. Копии в подставке нужен столбик на всём планшетном диапазоне. */ .main-navigation ul { display: block; padding: 15px 0; margin: 0 !important; border-top: 1px solid rgba(255, 255, 255, .2); } .main-navigation ul li > a, .main-navigation ul li > span { padding-top: 10px; padding-bottom: 10px; } } /* -------------------------------------------------------------------------- 3. ЭМОДЗИ У ПУНКТОВ МЕНЮ Ставим через ::before у
  • , а не у . Две причины: - у ссылок ::before уже занят подчёркиванием пункта (.top-menu > ul > li > a::before и то же у .main-navigation); - эмодзи не попадает в текст ссылки, и анкор внутренних ссылок остаётся чистым. После работы 31.08 по исходящим ссылкам это важно. Работает сразу везде: и в горизонтальном меню на десктопе, и в гамбургере на планшете и телефоне - разметка пунктов общая. Поменять эмодзи - поправить одну строку content у нужного пункта. -------------------------------------------------------------------------- */ .top-menu ul > li.menu-item-5109::before, /* Поиск туров */ .top-menu ul > li.menu-item-5108::before, /* Отели */ .top-menu ul > li.menu-item-1211::before, /* Авиабилеты */ .top-menu ul > li.menu-item-3601::before, /* Выбрать турфирму*/ .top-menu ul > li.menu-item-3602::before, /* Визы */ .top-menu ul > li.menu-item-3603::before, /* Санатории */ .top-menu ul > li.menu-item-3604::before, /* Вопрос-ответ */ .main-navigation ul > li.menu-item-5109::before, .main-navigation ul > li.menu-item-5108::before, .main-navigation ul > li.menu-item-1211::before, .main-navigation ul > li.menu-item-3601::before, .main-navigation ul > li.menu-item-3602::before, .main-navigation ul > li.menu-item-3603::before, .main-navigation ul > li.menu-item-3604::before { display: inline-block; margin-right: .4em; font-size: 1em; line-height: 1; vertical-align: baseline; transform: none; position: static; width: auto; height: auto; background: none; opacity: 1; } .top-menu ul > li.menu-item-5109::before, .main-navigation ul > li.menu-item-5109::before { content: "\1F50D"; } /* Поиск туров */ .top-menu ul > li.menu-item-5108::before, .main-navigation ul > li.menu-item-5108::before { content: "\1F3E8"; } /* Отели */ .top-menu ul > li.menu-item-1211::before, .main-navigation ul > li.menu-item-1211::before { content: "\2708\FE0F"; } /* Авиабилеты */ .top-menu ul > li.menu-item-3601::before, .main-navigation ul > li.menu-item-3601::before { content: "\1F9F3"; } /* Выбрать турфирму */ .top-menu ul > li.menu-item-3602::before, .main-navigation ul > li.menu-item-3602::before { content: "\1F6C2"; } /* Визы */ .top-menu ul > li.menu-item-3603::before, .main-navigation ul > li.menu-item-3603::before { content: "\1F33F"; } /* Санатории */ .top-menu ul > li.menu-item-3604::before, .main-navigation ul > li.menu-item-3604::before { content: "\1F4AC"; } /* Вопрос-ответ */ /* В гамбургере ссылка - блочная на всю ширину, поэтому эмодзи из ::before уходило на строку выше. Делаем пункт строкой: эмодзи и текст рядом, ссылка занимает остаток ширины и сохраняет крупную область нажатия. */ .main-navigation ul > li.menu-item-5109, .main-navigation ul > li.menu-item-5108, .main-navigation ul > li.menu-item-1211, .main-navigation ul > li.menu-item-3601, .main-navigation ul > li.menu-item-3602, .main-navigation ul > li.menu-item-3603, .main-navigation ul > li.menu-item-3604 { display: flex; align-items: center; } .main-navigation ul > li.menu-item-5109 > a, .main-navigation ul > li.menu-item-5108 > a, .main-navigation ul > li.menu-item-1211 > a, .main-navigation ul > li.menu-item-3601 > a, .main-navigation ul > li.menu-item-3602 > a, .main-navigation ul > li.menu-item-3603 > a, .main-navigation ul > li.menu-item-3604 > a { flex: 1 1 auto; min-width: 0; } /* =================================================================== Футер: юридические ссылки и карта сайта переехали из col_2 в col_3. Разделительная линия переехала вместе с ними - раньше она была нижней границей .col_2 .footer_link_row_1, теперь верхняя граница самого блока. Оба прежних правила удалены из "Дополнительных стилей" Настройщика, чтобы линия не осталась висеть на старом месте. Откат: удалить эту секцию и вернуть в Настройщик два правила из /home/backup/tourday-*-footer/custom_css.before. =================================================================== */ .my_footer .col_3 .footer_link_row_2 { margin-top: 22px; padding-top: 18px; border-top: 1px solid #bbb; } /* В col_3 у ссылок отступ 15px - он рассчитан на одну крупную ссылку с иконкой Telegram, для списка из пяти строк это слишком много. */ .my_footer .col_3 .footer_link_row_2 a { display: block; margin-bottom: 6px; line-height: 1.45; } .my_footer .col_3 .footer_link_row_2 a:last-child { margin-bottom: 0; } /* Кнопка канала: ширина была жёстко задана в 220px под прежний короткий анкор. Новый длиннее, поэтому ширина по содержимому. */ .my_footer .col_4 a { /* В style.css у кнопки display: flex - блочный flex тянется во всю ширину колонки, как только снимаешь фиксированные 220px. inline-flex даёт ширину по содержимому. */ display: inline-flex; width: auto; min-width: 220px; max-width: 100%; height: auto; min-height: 40px; padding: 9px 16px; text-align: center; line-height: 1.25; } /* Список из пяти пунктов - строки чуть плотнее, чем было при четырёх. */ .my_footer .col_4 li { margin-bottom: 4px; line-height: 1.45; } /* Между списком и кнопкой было 46px: 16px нижнего отступа списка плюс 30px верхнего у кнопки. Для футера это провал, кнопка отрывалась от того, к чему призывает. Оставляем 14px одним отступом. */ .my_footer .col_4 ul { margin-bottom: 0; } .my_footer .col_4 a { margin-top: 14px; } .my_footer .col_4 li:before { top: 7px; } /* =================================================================== Липкий сайдбар: форма поиска туров. Было: скрипт в code_head вешал на .TVVerticalForm класс fixedt после 140px прокрутки, а правило в Настройщике делало position: fixed; top: 80px. У fixed нет и не может быть "нижней границы" - форма ехала до самого низа страницы, наползала на нижние секции контента и на футер. Правило из Настройщика удалено. Стало: position: sticky на обёртке .sticky-sidebar. Она лежит внутри aside.widget-area, а та в flex-строке с контентом и растянута на всю его высоту. Поэтому форма прилипает при прокрутке и сама останавливается там, где кончается колонка, - то есть до футера. Никаких скриптов и подобранных вручную чисел. Ключевая деталь: у div.site стоял overflow: hidden, а он делает элемент скролл-контейнером и полностью отключает sticky внутри. Меняем на overflow-x: clip - обрезает точно так же (это и была задача правила - прятать горизонтальное переполнение), но контейнера прокрутки не создаёт. Браузеры без поддержки clip правило игнорируют: там останется прежнее поведение, не хуже. Класс fixedt скрипт по-прежнему вешает - теперь он ни на что не влияет. Сам скрипт в code_head не трогали. Откат: удалить эту секцию и вернуть в Настройщик правило .TVVerticalForm.fixedt из custom_css.before. =================================================================== */ div.site { overflow-x: clip; overflow-y: visible; } /* 90px = высота липкой шапки (72) плюс небольшой зазор. */ aside.widget-area .sticky-sidebar { position: sticky; top: 90px; } /* Страховка на случай, если класс останется висеть после правки. */ .widget-area .TVVerticalForm.fixedt { position: static; top: auto; } /* Ниже 992px сайдбар уходит под контент и липкость не нужна. */ @media (max-width: 991px) { aside.widget-area .sticky-sidebar { position: static; top: auto; } }