O'Reilly logo

Mastering Magento Theme Design by Andrea Saccà

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Developing the header

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

Developing the header

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> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required