Implementing our Header region
The second item we will need to address is replacing the static content in our Header region. Referring back to the mockup, we have a logo, menu, and search form, each with their respective functionality. Tackling this next section will require quite a few more steps:
First, we will address the logo that has been moved into the brand new site branding block. We will upload a new logo, assign the block to our header region, and work with block templates.
Next, we will use Twig to print our Header region within our homepage to view any blocks assigned to it.
Then, we will work with the search form block and create both the block template and the input template while introducing some new Twig techniques to work with variables. We will also add our first custom JavaScript to enable the toggle functionality.
We will also take a look at our main menu and work with menu templates to modify the markup to match our design.
Finally, we will add our custom script to make our...