/* ==========================================================================
MyBGBilling «lighthru» — сетка, раскладка и адаптивность
--------------------------------------------------------------------------
Этот файл подключается ПОСЛЕДНИМ (вместо вендорского
theme/1_0/layout-override.css), поэтому всё здесь имеет приоритет над
общими layout.css / layout-override.css и темами Bootswatch.
Общие файлы вендора при этом не изменяются — дефолтная тема «yeti»
продолжает работать ровно как раньше.
Замена в index.xhtml / login.xhtml / confirm.xhtml:
--------------------------------------------------------------------------
ПОЧЕМУ ШАПКА ПЕРЕБРАНА ПОЛНОСТЬЮ
В layout.css вендор позиционирует элементы шапки абсолютно:
div.navbar-brand position:absolute; left:13px; top:10px
a.navbar-brand position:absolute; left:84px; top:15px
.navbar-top-links position:absolute; bottom:0; right:0
div.navbar-header min-height:100px (при >=768px)
Из-за этого:
* .navbar-top-links перекрывал кнопку бургера — меню было физически
недоступно (элемент перехватывал клики), и шапка вылезала за экран;
* реальная высота шапки 100px не совпадала с --lk-nav-h, и заголовок
страницы уезжал под неё.
Поэтому все абсолютные позиции сняты, шапка переведена на flex —
работает одинаково на всех ширинах.
========================================================================== */
/* ==========================================================================
1. КАРКАС
========================================================================== */
#wrapper {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
/* страховка от горизонтального скролла из-за абсолютных элементов вендора */
overflow-x: hidden;
}
/* ==========================================================================
2. ШАПКА — общая схема для всех ширин
========================================================================== */
.navbar-static-top {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
min-height: var(--lk-nav-h);
box-shadow: var(--lk-shadow-md);
}
.navbar-static-top > .container-fluid {
display: flex;
align-items: center;
flex-wrap: nowrap;
min-height: var(--lk-nav-h);
padding: 0 16px;
}
/* Вендор задаёт .navbar-header{min-height:100px} при >=768px — из-за этого
шапка становилась выше --lk-nav-h, и логотип с пунктами «баланс/договор»
наезжали на сайдбар и на заголовок страницы. Высота должна задаваться
переменной, иначе все смещения дальше считаются неверно. */
.navbar-static-top .navbar-header {
min-height: var(--lk-nav-h);
padding: 0 !important;
margin: 0 !important;
}
/* --- снимаем вендорское абсолютное позиционирование ---
Селекторы ниже — по КЛАССАМ, а не по тегу: вендор пишет
`a.navbar-brand { position:absolute; left:84px; top:15px }`,
но разметка даёт .
Правило по тегу с более высокой специфичностью, чем моё,
и сбивало «Личный кабинет» влево поверх логотипа. */
.navbar-static-top .navbar-header,
.navbar-static-top .navbar-brand,
.navbar-static-top .navbar-top-links,
.navbar-static-top #navbar-top-links-form {
position: static;
float: none;
}
/* --- бургер --- */
.navbar-static-top .navbar-header {
display: flex;
align-items: center;
min-width: 0;
flex: 0 1 auto;
}
/* Вендор оборачивает логотип и «Личный кабинет» в БЕЗЫМЯННЫЙ div: