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> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar...