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

Creating the navigation bar

For the navigation bar, we can use the <nav> tag to wrap it up and make it responsive and ready with some tricks. Bootstrap helps us with the navigation component that we can integrate with a little help from jQuery.

In the header.phtml file, the navigation block looks as follows:

<!-- Navigation --> <nav class="navbar navbar-default navbar-main" role="navigation"> <div class="container"> <div class="row"> <div class="navbar-header"> <a class="navbar-brand visible-xs" href="#"> <?php echo $this->__('Categories') ?> </a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> <span class="sr-only"><?php echo $this->__('Toggle Navigation') ?></span> <span class="icon-bar"></span> ...

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