title: Custom Header Layout - Spartacus Storefront
body: <p>Has anyone solved or knows how to solve the following situation given the implementation of the header in Spartacus?</p>
  <p>I would like to show in the header, a layout on the right of two level blocks, and on the left of a single level block.</p>
  <p><a href="https://i.stack.imgur.com/JIHke.png" rel="nofollow noreferrer">Objective Header Layout</a></p>
  <p>I can't think of how to do it since I can't see how to wrap certain slots, given the Spartacus implementation for the header.
  Given the implementation of the header in Spartacus, inside the StorefrontComponent I cannot replace it using the <code>ConfigModule.withConfig ({...}, as CmsConfig)</code></p>
  <p>I understand and already tried that I can replace the header, implementing an Outlet (<code>cxOutletRef = &quot;header&quot;</code>), but this makes it impossible to edit it through SmartEdit, which is not acceptable to me.</p>
  <p>Any suggestion? Or possible solution?</p>
  <p>As a last option it occurs to me that I can create a component type from the back, and map it from Angular using <code>&quot;ConfigModule.withConfig ({...}, as CmsConfig)&quot;</code> implementing the &quot;conflicting two-level&quot; block from scratch or even the entire header.</p>
  <p>Thank you !</p>
  <p><strong>////// CORRECTION 09/23/20 //////</strong></p>
  <p>Outlets do not prevent editing via SmartEdit. It's necessary to indicate the Slot to which the component corresponds, this is easy to implement using the PageSlotComponent.</p>
  <p>✔ Example:</p>
  <pre><code>&lt;ng-template cxOutletRef=&quot;cx-header&quot;&gt;
        &lt;header
          cxSkipLink=&quot;cx-header&quot;
          [cxFocus]=&quot;{ disableMouseFocus: true }&quot;
          [class.is-expanded]=&quot;isExpanded$ | async&quot;
          (keydown.escape)=&quot;collapseMenu()&quot;
          (click)=&quot;collapseMenuIfClickOutside($event)&quot;
        &gt;
          &lt;cx-page-slot position=&quot;MiniCart&quot;&gt;&lt;/cx-page-slot&gt;
        &lt;/header&gt;
        &lt;cx-page-slot position=&quot;BottomHeaderSlot&quot;&gt; &lt;/cx-page-slot&gt;
        &lt;cx-global-message&gt;&lt;/cx-global-message&gt;
      &lt;/ng-template&gt;
  </code></pre>
  <p>In this way, SmartEdit does allow you to edit the MiniCart component, within its corresponding slot.</p>
  <p> Wrong way:</p>
  <pre><code>&lt;ng-template cxOutletRef=&quot;cx-header&quot;&gt;
    &lt;header
      cxSkipLink=&quot;cx-header&quot;
      [cxFocus]=&quot;{ disableMouseFocus: true }&quot;
      [class.is-expanded]=&quot;isExpanded$ | async&quot;
      (keydown.escape)=&quot;collapseMenu()&quot;
      (click)=&quot;collapseMenuIfClickOutside($event)&quot;
    &gt;
      &lt;cx-mini-cart&gt;&lt;/cx-mini-cart&gt;
    &lt;/header&gt;
    &lt;cx-page-slot position=&quot;BottomHeaderSlot&quot;&gt; &lt;/cx-page-slot&gt;
    &lt;cx-global-message&gt;&lt;/cx-global-message&gt;
  &lt;/ng-template&gt;
  </code></pre>