Developing the header

The header of our theme will look as shown in the following screenshot:

As you can see, there are three main sections that I will call the top header (the black line on the top), the main header (the white one), and the navigation bar.

To customize our header, open the header.phtml file located at app/design/frontend/bookstore/default/page/html and create the basic structure with the Bootstrap scaffolding. Our header file code will look as follows:

<!-- TopBar -->
<div id="topbar">
<div class="container">
<div class="row">
... 
</div>
</div>
</div>

<!-- Header -->
<div id="header">
<div class="container">
<div class="row">

</div>
</div>
</div>

<!-- Navigation -->
<nav>
. . .
</nav>

Let's discuss the preceding code in detail:

• In the first block, inside the top header div element, we put some custom links or custom text in the left, and the user area in the right

• In the...