add link on header

add-link-on-header.markdown

add link on header

#PHP

add_action('blocktype_append_header_layer','my_blocktype_append_header_layer');

function my_blocktype_append_header_layer(){
	echo '<div class="custom-layer"><a href="#" class="skin-button">Link added to header</a></div>';
}

A Pen by tenman on CodePen.

License.

index.html

<header class="header-layer no-header-media header-is-dark template-part-header-custom">
  <div class="header-text">
    <h1 class="site-title" id="site-title">
      <a href="https://www.example.com/" rel="home" class="site-title-link">
					<span class="site-title-text">Blog Title</span>
			</a>
    </h1>
    <p class="site-description">Blog description</p>
  </div>
  <div class="custom-layer"><a href="#" class="skin-button">Link added to header</a></div>
</header>

style.scss

/* css for custom-layer start */
.custom-layer{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  right:0;
  margin:auto;
  .skin-button{
    position:absolute;
    right:1rem;
    bottom:0;
  }
}
/* css for custom-layer end */

/* Theme style */
:root{
  --common_font_size:16px;
  --content_gap:24px;
}
header{
  position:relative;
  background:#ecf0f1;
  overflow:hidden;
}
a{
  text-decoration:none;
  &.skin-button {
      clear: both;
      float: none;
      overflow: hidden;
      display: inline-block;
      text-align: center;
      width: -moz-fit-content;
      width: fit-content;
      padding: 0 1rem;
      font-size:var(--common_font_size);
      line-height: calc(var(--common_font_size) * 3);
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
      margin-left: var(--content_gap, 24px);
      margin-right: var(--content_gap, 24px);
      color:#fff;
      background:tomato;
  }
}
.site-title{
  margin-bottom:0;
      margin-left: var(--content_gap, 24px);
      margin-right: var(--content_gap, 24px);
}
.site-description{
  margin-top:0;
      margin-left: var(--content_gap, 24px);
      margin-right: var(--content_gap, 24px);
}