Header Style 2

Mohsin Liaquat

The above block is copied from the site: Myca Jeter

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":""}} -->
<header class="wp-block-group alignfull site-header" style="padding-top:0;padding-bottom:0"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:site-logo {"width":128,"shouldSyncIcon":false} /-->

<!-- wp:group {"className":"header-right-side","layout":{"type":"constrained"}} -->
<div class="wp-block-group header-right-side"><!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right"}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">(984) 207-6131</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:navigation {"ref":4,"textColor":"two","showSubmenuIcon":false,"overlayMenu":"never","overlayBackgroundColor":"base","overlayTextColor":"contrast","style":{"layout":{"selfStretch":"fit","flexSize":null},"typography":{"fontStyle":"normal","fontWeight":"500","textTransform":"uppercase"}},"fontSize":"heading-6","fontFamily":"one","layout":{"type":"flex","flexWrap":"wrap","orientation":"horizontal","justifyContent":"center"}} /--></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.sticky header {
	background-color: var(--wp--preset--color--one);
	filter: drop-shadow(0 4px 20px rgba(0, 0, 0, .15));
}

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

#site-container.page-template-page-landing main.wp-block-group {
	padding-top: 0;
}

/*
Site Navigation
--------------------------------------------- */

#site-container header nav.wp-block-navigation {
    padding-top: 30px;
    margin-top: 0;
}

#site-container header nav > .wp-block-navigation {
	gap: 40px;
	font-size: var(--wp--preset--font-size--paragraph-1);
}

#site-container header nav > ul > li a {
	text-decoration: none;
}

#site-container header nav > ul > li > a {
    padding-bottom: 23px;
}

#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--two);
	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--two);
}

/* Submenu Nav
--------------------------------------------- */

#site-container header .wp-block-navigation__submenu-container {
	min-width: 250px;
	right: inherit;
	border: none;
	border-top: 5px solid var(--wp--preset--color--two);
}

#site-container header .wp-block-navigation__submenu-container li {
	margin-bottom: 0;
}

#site-container header .wp-block-navigation__submenu-container a {
	padding: 10px 20px;
	color: var(--wp--preset--color--two);
	text-transform: capitalize;
}

#site-container header .wp-block-navigation__submenu-container a:hover {
	background-color: var(--wp--preset--color--three);
	color: var(--wp--preset--color--one);
}

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

/* Responsive Nav
--------------------------------------------- */

button.menu-toggle, 
button.sub-menu-toggle {
	float: right;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--three);
	cursor: pointer;
	font-size: 22px;
	font-weight: 400;
	font-family: dashicons;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	display: none;
	position: relative;
	z-index: 100;
}

button.menu-toggle.activated {
	font-size: 30px;
}

button.sub-menu-toggle {
	font-size: 20px;
	position: absolute;
	right: 20px;
	top: 0;
}

.wp-block-navigation__submenu-container button.sub-menu-toggle {
	right: -6px;
}

button.sub-menu-toggle.activated {
	color: var(--wp--preset--color--three);
}

.menu-toggle:before {
	content: "\f349";
}

.menu-toggle.activated:before {
	content: "\f335";
}

.sub-menu-toggle:before {
	content: "\f347";
}

.sub-menu-toggle.activated:before {
	content: "\f343";
}

button.menu-toggle + *, 
button.sub-menu-toggle + * {
	clear: both;
}