Drupal 8: Enterprise Web Development

Adding our Global Header

Our website has several global components that were present on our home page that don't currently exist on our interior pages. One such item is the Global Header, which consists of the Utility menu, Logo, Main menu, and Search form block.

To add this section to our template, all we need to do is simply copy the header markup from the page--front.html.twig template.

1. Open page.html.twig and delete the entire contents.
2. Open page--front.html.twig and copy the following markup:

      <header class="header" role="banner">
        <div class="header-top">
          <div class="container">
            {{ page.header_top }}
          </div>
        </div>
   
        <div class="header-nav container">
          {{ page.header}}
          {{ page.primary_menu }}
        </div>
      </header>

3. Paste the markup into page.html.twig