Adding a hyperlink button to a webpage header using Calcite?

ArianaBernal

I am trying to get a button working on the header of my web map app but for whatever reason it shows temporarily only while the page is loading but disappears once loaded. Is there something I am missing? here is the code I am using for it. It is a simple button with a link to another app

Current code:

 

Button showing before disappearing:

 

KittyHurley

@ArianaBernal, Thank you for the Codepen for the additional context.

We recommend moving the header slot inside the calcite-shell. Then add some CSS .class selectors to the header slot, controls, and calcite-switch to align them in the header.

Code snippet below, and a full Codepen example.

<style>
.custom-header {
  display: flex;
  padding: 0 1rem;
  background-color: var(--calcite-ui-foreground-1);
}

.custom-header-controls {
  margin-inline-start: auto;
  display: flex;
  align-self: center;
}

.custom-label-wrapper {
  display: flex;
  border: 1px solid var(--calcite-ui-border-1);
  margin-inline-start: 1rem;
  padding: 0 0.5rem;
}

.header-switch {
  margin: 0 0.5rem;
}
</style>

<calcite-shell content-behind hidden>
  <!--  Header slot  -->
  <div slot="header" class="custom-header">
    <h2 id="header-title">
      <!-- Dynamically populated -->
    </h2>
    <!-- Address Checker button -->
    <div class="custom-header-controls">
      <calcite-button appearance="clear" color="blue" href="{your-custom-url}" icon-start="map-pin">Address Checker</calcite-button>
      <!-- Dark Mode Switch -->
      <calcite-label disable-spacing layout="inline" class="custom-label-wrapper">
        <calcite-icon icon="brightness" scale="s"></calcite-icon>
        <calcite-switch class="header-switch"></calcite-switch>
        <calcite-icon icon="moon" scale="s"></calcite-icon>
      </calcite-label>
    </div>
  </div>
...Other calcite-shell content...
</calcite-shell>