Header Style 3

Mohsin Liaquat

The above block is copied from the site: Alex Cooper

Pattern HTML

<!-- wp:group {"tagName":"header","metadata":{"name":"Header"},"align":"full","className":"site-header","style":{"spacing":{"blockGap":"0","padding":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained","contentSize":"1170px"}} -->
<header class="wp-block-group alignfull site-header" style="padding-top:0;padding-bottom:0"><!-- wp:group {"style":{"spacing":{"padding":{"top":"8px","bottom":"0"},"blockGap":"0"}},"layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-top:8px;padding-bottom:0"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:site-logo {"width":424,"shouldSyncIcon":false} /-->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"right":"0","left":"0"},"margin":{"top":"0","bottom":"0"},"blockGap":"var:preset|spacing|15"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-right:0;padding-left:0"><!-- wp:image {"lightbox":{"enabled":false},"id":55,"sizeSlug":"full","linkDestination":"custom"} -->
<figure class="wp-block-image size-full"><a href="https://facebook.com/choosingbattles" target="_blank" rel=" noreferrer noopener"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/07/facebook.png" alt="" class="wp-image-55"/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"lightbox":{"enabled":false},"id":56,"sizeSlug":"full","linkDestination":"custom"} -->
<figure class="wp-block-image size-full"><a href="https://instagram.com/choosingyourbattles" target="_blank" rel=" noreferrer noopener"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/07/facebook.png" alt="" class="wp-image-56"/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"lightbox":{"enabled":false},"id":57,"sizeSlug":"full","linkDestination":"custom"} -->
<figure class="wp-block-image size-full"><a href="https://www.psychologytoday.com/profile/952234" target="_blank" rel=" noreferrer noopener"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/07/psychologytoday-1.png" alt="" class="wp-image-57"/></a></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"main-nav","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group main-nav"><!-- wp:navigation {"ref":4,"textColor":"second","showSubmenuIcon":false,"overlayMenu":"never","overlayBackgroundColor":"base","overlayTextColor":"contrast","style":{"layout":{"selfStretch":"fit","flexSize":null}},"layout":{"type":"flex","flexWrap":"wrap","orientation":"horizontal","justifyContent":"center"}} /-->

<!-- wp:group {"className":"header-phone","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group header-phone"><!-- wp:image {"id":52,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/07/phone.png" alt="" class="wp-image-52"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="tel:4407457252">(440) 745-7252</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></header>
<!-- /wp:group -->

Pattern CSS

/*
Site Header
---------------------------------------------------------------------------------------------------- */

#site-container header {
    position: fixed;
    left: 0;
    width: 100%;
    transition: all 0.3s ease;
    z-index: 9999;
}

#site-container header .main-nav {
    padding: 13px 0 0;
}

#site-container.sticky header {
    background-color: var(--wp--preset--color--first);
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, .15));
}

#site-container main.wp-block-group {
    padding-top: 123px;
}

header .wp-block-site-logo {
    max-width: 424px;
}
/*
Site Navigation
--------------------------------------------- */
#site-container header {
	border-bottom: 4px solid var(--wp--preset--color--third);
}

#site-container header .header-main-menu {
    padding-top: 40px;
}

#site-container header nav > .wp-block-navigation {
    gap: 60px;
    font-size: var(--wp--preset--font-size--paragraph-1);
}
header nav.wp-block-navigation {
    padding-top: 7px;
    padding-bottom: 0;
	margin-top: 0;
}
#site-container header nav > ul > li > a {
    padding-bottom: 5px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--wp--preset--color--eighth);
}
#site-container header nav > ul > li.has-child > a:after {
	content: '';
	display: inline-block;
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	background: var(--wp--preset--color--second);
	width: 10px;
	height: 5px;
	margin-left: 5px;
	margin-bottom: 3px;
}

#site-container header nav.wp-block-navigation > ul > li:hover,
#site-container header nav.wp-block-navigation > ul > .current-menu-item {
    color: var(--wp--preset--color--second);
}

.header-phone p {
    font-weight: 700;
}
.header-phone figure.wp-block-image.size-full {
    display: flex;
}
#site-container .header-phone {
    gap: 6px;
    position: relative;
    padding-left: 30px;
    margin-left: 35px;
}
.header-phone::before{
	content: '';
	position: absolute;
	top: 5px;
	left: 0;
	width: 1px;
	height: 25px;
	background-color: #162657;
}
#site-container .header-phone a{
	text-decoration: none;
}
/* Submenu Nav
--------------------------------------------- */

#site-container header .wp-block-navigation__submenu-container {
	min-width: 250px;
	right: inherit;
	padding: 0;
	border: none;
	border-top: 6px solid #0E243D;
}

#site-container header .wp-block-navigation__submenu-container a {
	padding: 10px 20px;
	color: var(--wp--preset--color--second);
	font-size: 16px;
}

#site-container header .wp-block-navigation__submenu-container a:hover {
	color: var(--wp--preset--color--first);
	text-decoration: none;
	background: var(--wp--preset--color--fifth);
}

#site-container header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	left: 100%;
	top: 0;
}