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.

    Note

    One more very important item to keep in mind is that we will need to also add the page content region to our template. Failure to add the {{ page.content }} region will result in not being able to log in to the Drupal Admin or see any content that Drupal assigns to this region.

  4. Add the following Twig variable to the bottom of our template:
      {{ page.content }}
  5. Save page.html.twig.

Make sure to clear Drupal's cache and refresh the About Us page within our browser. Our header is now in place and functioning as we would expect.

Adding our Global Header
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
52.14.151.45