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;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
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