Header Style 1

Mohsin Liaquat

The above block is copied from the site: Jacqueline Schwartz

Pattern HTML

<!-- wp:group {"align":"full","style":{"border":{"style":"none","width":"0px"},"spacing":{"blockGap":"0"}},"layout":{"type":"constrained","contentSize":"1320px"}} -->
<div class="wp-block-group alignfull" style="border-style:none;border-width:0px"><!-- wp:group {"className":"site-header","style":{"spacing":{"blockGap":"var:preset|spacing|100"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group site-header"><!-- wp:site-logo {"width":236} /-->

<!-- wp:group {"className":"header-right-side","style":{"spacing":{"blockGap":"var:preset|spacing|150"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
<div class="wp-block-group header-right-side"><!-- wp:navigation {"ref":35,"textColor":"two","showSubmenuIcon":false,"overlayMenu":"never","overlayBackgroundColor":"base","overlayTextColor":"contrast","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400","fontSize":"17px"},"spacing":{"blockGap":"var:preset|spacing|100"}},"fontFamily":"one","layout":{"type":"flex","justifyContent":"right","flexWrap":"wrap"}} /-->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link wp-element-button" href="tel:2409264303">CALL NOW</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /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));
}

.home#site-container header {
	background-color: rgba(255, 255, 255, 0.80);
}

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

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

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

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

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

#site-container header nav > .wp-block-navigation {
	gap: 50px;
}

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

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

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

#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;
	font-size: 16px;
	letter-spacing: 0;
	font-weight: 400;
}

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

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