Drupal site headers

Building a header in Drupal can be a bit confusing! This class will provide an overview on how to set up a header, and explain the implications of some of the decisions you can make.

Blocks and regions

Drupal's page template (page.html.tpl) defines how the regions are laid out. Blocks can be placed in these regions on the block layout page.

You can start with just one header region, and add the blocks you need. The system branding block, main navigation, and user menu are some common blocks to place there. However, these will all be printed directly in the header region and if you want to wrap some of them in a div, you just won't be able to.

Try breaking your header into specific regions, before placing your blocks. This will allow you to group blocks together and wrap them with another element.

 Desktop

Simple flexbox header

Mobile

Simple flexbox header - mobile

 

Topics