/* ========================================== SOINTERA STYLE JOOMLA CASSIOPEIA HEADER + MAIN MENU ========================================== */ /* Общая шапка */ header.container-header { background: rgba(244, 241, 236, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0, 0, 0, 0.08); padding: 0; } /* Контейнер шапки */ .container-header .grid-child { max-width: 1280px; width: calc(100% - 40px); margin: 0 auto; } /* ========================================== ЛОГОТИП ========================================== */ .container-header .navbar-brand { font-family: Arial, Helvetica, sans-serif; font-size: 23px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: #171614; padding: 25px 0; } /* ========================================== ОСНОВНОЕ МЕНЮ ========================================== */ .container-header .navbar-nav { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 0 auto; } /* Пункты меню */ .container-header .navbar-nav > li > a { position: relative; display: inline-block; padding: 10px 0; color: #171614; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 400; line-height: 1; letter-spacing: 0.11em; text-transform: uppercase; background: none !important; transition: color .25s ease, opacity .25s ease; } /* Линия под пунктом */ .container-header .navbar-nav > li > a::after { content: ""; position: absolute; left: 0; bottom: 3px; width: 0; height: 1px; background: #171614; transition: width .3s ease; } /* Hover */ .container-header .navbar-nav > li > a:hover { color: #171614; opacity: .6; } .container-header .navbar-nav > li > a:hover::after { width: 100%; } /* Активный пункт */ .container-header .navbar-nav > li.active > a { color: #171614; background: transparent !important; } .container-header .navbar-nav > li.active > a::after { width: 100%; } /* ========================================== УБИРАЕМ СТАНДАРТНЫЙ ВИД CASSIOPEIA ========================================== */ .container-header .navbar { padding: 0; min-height: 76px; background: transparent; } .container-header .navbar-toggler { border: 0; padding: 8px; box-shadow: none; } .container-header .navbar-toggler:focus { box-shadow: none; } /* ========================================== МОБИЛЬНОЕ МЕНЮ ========================================== */ @media (max-width: 991px) { .container-header .grid-child { width: calc(100% - 30px); } .container-header .navbar { min-height: 70px; } .container-header .navbar-brand { font-size: 20px; letter-spacing: .18em; } .container-header .navbar-collapse { padding: 25px 0 30px; } .container-header .navbar-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; margin: 0; } .container-header .navbar-nav > li { width: 100%; border-bottom: 1px solid #d8d2c9; } .container-header .navbar-nav > li:first-child { border-top: 1px solid #d8d2c9; } .container-header .navbar-nav > li > a { width: 100%; padding: 17px 0; font-size: 12px; letter-spacing: .12em; } .container-header .navbar-nav > li > a::after { display: none; } } /* ========================================== ОЧЕНЬ МАЛЕНЬКИЙ ЭКРАН ========================================== */ @media (max-width: 480px) { .container-header .grid-child { width: calc(100% - 22px); } .container-header .navbar-brand { font-size: 18px; } }
.container-header .mod-menu {
    background: red !important;
}

.container-header .mod-menu > li > a {
    color: blue !important;
    background: yellow !important;
}