Header with right button

Mohsin Liaquat

The above block is copied from the site: Michael Goldstein

Pattern HTML

<!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull"><!-- wp:group {"className":"header-row","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"backgroundColor":"five","layout":{"type":"constrained","contentSize":"1170px"}} -->
<div class="wp-block-group header-row has-five-background-color has-background" style="padding-top:0;padding-bottom:0"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"9px","bottom":"9px"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide" style="padding-top:9px;padding-bottom:9px"><!-- wp:site-logo {"width":472} /-->

<!-- wp:buttons {"className":"header-buttons header-right-side"} -->
<div class="wp-block-buttons header-buttons header-right-side"><!-- wp:button {"className":"is-style-yellow-charcoal"} -->
<div class="wp-block-button is-style-yellow-charcoal"><a class="wp-block-button__link wp-element-button" href="tel:8559148437">(855) 914-8437</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"backgroundColor":"three","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-three-background-color has-background"><!-- wp:navigation {"ref":4,"textColor":"one","showSubmenuIcon":false,"overlayMenu":"never","style":{"typography":{"fontSize":"17px","fontStyle":"normal","fontWeight":"500","textTransform":"uppercase"}},"layout":{"type":"flex","justifyContent":"center"}} /--></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));
}

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

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

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

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

#site-container header nav > .wp-block-navigation {
	gap: 88px;
	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 {
    padding: 12px 0 10px;
}

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

/* 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);
    top: 50px;
}

#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);
    font-size: 16px;
    text-transform: capitalize;
    font-weight: 400;	
}

#site-container header .wp-block-navigation__submenu-container a:hover {
	background-color: var(--wp--preset--color--five);
	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;
}

@media only screen and (max-width: 980px) {

	#site-container header {
		position: relative;
	}

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

	#site-container header .wp-block-site-logo {
        max-width: 200px;
        position: relative;
        top: inherit;
    }

	#site-container .header-right-side {
		width: 100%;
		display: block;
		padding-top: 0;
		text-align: right;
	}
}