feat: add top header with logo, phone and demo CTA
This commit is contained in:
@@ -0,0 +1,8 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 30" height="30" role="img" aria-label="первыйБит">
|
||||||
|
<title>первыйБит</title>
|
||||||
|
<!-- Pink accent square -->
|
||||||
|
<rect x="0" y="5" width="20" height="20" fill="#E50071"/>
|
||||||
|
<!-- Wordmark text -->
|
||||||
|
<text x="28" y="22" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#000000" letter-spacing="-0.3">первый</text>
|
||||||
|
<text x="100" y="22" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#E50071" letter-spacing="-0.3">Бит</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 558 B |
@@ -480,3 +480,109 @@ body.sidebar-overlay::after {
|
|||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Top header bar
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.top-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: var(--header-height);
|
||||||
|
padding: 0 32px;
|
||||||
|
background: var(--color-white);
|
||||||
|
border-bottom: 1px solid var(--color-gray-light);
|
||||||
|
|
||||||
|
/* Positioned to the right of the collapsed sidebar */
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: var(--sidebar-width-collapsed);
|
||||||
|
right: 0;
|
||||||
|
z-index: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header__left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header__logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header__logo img {
|
||||||
|
height: 30px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header__tagline {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--color-gray-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header__right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header__phone {
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--color-black);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header__phone:hover,
|
||||||
|
.top-header__phone:focus {
|
||||||
|
color: var(--color-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header__search {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--color-black);
|
||||||
|
padding: 4px;
|
||||||
|
transition: color var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header__search:hover,
|
||||||
|
.top-header__search:focus {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header__search:focus-visible {
|
||||||
|
outline: 2px solid var(--color-primary);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Offset main content below the fixed top header */
|
||||||
|
.site-content,
|
||||||
|
.site-header,
|
||||||
|
.site-footer {
|
||||||
|
margin-top: var(--header-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.top-header {
|
||||||
|
left: 0;
|
||||||
|
padding: 0 16px 0 56px; /* leave room for hamburger button */
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header__tagline {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header__phone {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -0,0 +1,48 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* БИТ.WMS Child Theme — Top header bar template
|
||||||
|
*
|
||||||
|
* Renders the thin 60px header to the right of the sidebar.
|
||||||
|
* Contains: logo + tagline on left, phone + CTA button + search on right.
|
||||||
|
*
|
||||||
|
* Hooked into generate_before_header at priority 20
|
||||||
|
* (after sidebar-nav which uses default priority 10).
|
||||||
|
*
|
||||||
|
* @package bitwms-child
|
||||||
|
*/
|
||||||
|
|
||||||
|
if ( ! defined( 'ABSPATH' ) ) {
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$theme_uri = get_stylesheet_directory_uri();
|
||||||
|
?>
|
||||||
|
|
||||||
|
<header class="top-header">
|
||||||
|
<div class="top-header__left">
|
||||||
|
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="top-header__logo" aria-label="<?php esc_attr_e( 'На главную', 'bitwms-child' ); ?>">
|
||||||
|
<img
|
||||||
|
src="<?php echo esc_url( $theme_uri . '/img/logo.svg' ); ?>"
|
||||||
|
alt="<?php esc_attr_e( 'первыйБит', 'bitwms-child' ); ?>"
|
||||||
|
height="30"
|
||||||
|
width="auto"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<span class="top-header__tagline"><?php esc_html_e( 'Экспертный портал по складской логистике', 'bitwms-child' ); ?></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="top-header__right">
|
||||||
|
<a href="tel:+73432000000" class="top-header__phone">+7 (343) 200-00-00</a>
|
||||||
|
|
||||||
|
<a href="#demo-form" class="btn btn-primary btn-sm">
|
||||||
|
<?php esc_html_e( 'Заказать демо', 'bitwms-child' ); ?>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<button class="top-header__search" aria-label="<?php esc_attr_e( 'Поиск', 'bitwms-child' ); ?>" type="button">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
|
||||||
|
<circle cx="11" cy="11" r="8"></circle>
|
||||||
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
Reference in New Issue
Block a user