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-collapse navbar-main-collapse”>
<?php echo $this->getChildHtml(‘topMenu’) ?>
<?php echo $this->getChildHtml(‘topSearch’) ?>
</div>
</div>
</div>
</nav>
1. The top menu bar
The topmenu.phtml file is the navigation file that you can copy from app/design/ frontend/base/default/template/page/html/.
The final code of this file is as follows:
<?php $_menu = $this->getHtml(‘level-top’) ?>
<?php if ($_menu): ?>
<ul class=”nav navbar-nav”>
<li><a href=”<?php echo $this->getUrl(”) ?>” title=”<?php echo $this-
>getLogoAlt() ?>”>Home</a></li>
<?php echo $_menu ?>
</ul>
<?php endif ?>
Unfortunately, the Bootstrap menu has some classes that we cannot add in this file.
To solve this problem, we can add the Bootstrap classes with some jQuery scripts.
So open the jquery.scripts.js file that you created before and add the following code just after jQuery(document).ready(function() {:
jQuery(‘.navbar .parent’).addClass(‘dropdown’);
jQuery(‘.navbar a.level-top’).addClass(‘dropdown-toggle’);
jQuery(‘.navbar li.parent ul’).addClass(‘dropdown-menu’);
jQuery(‘.navbar li.level1 ul’).wrap(‘<li class=”dropdown-submenu”
/>’);
jQuery(‘.navbar ul.nav li.level0.dropdown’).hover(function() {
jQuery(this).find(‘.level0.dropdown-menu’).stop(true, true).fadeIn();
}, function() {
jQuery(this).find(‘.level0.dropdown-menu’).stop(true, true).fadeOut();
});
Now add the following CSS code to hide the submenu that will be displayed only on the mousehover event with the jQuery described before:
/* Navbar */
.navbar {
border:0 none;
border-radius:0;
margin:0;
border-bottom:3px solid #E7E7E7;
}
.navbar .navbar-form {
padding-right:10px;
}
.navbar-nav {
}
.navbar-default .navbar-nav > li:hover > a {
background:#fff;
box-shadow:0 6px 12px rgba(0,0,0,0.176);
}
.navbar ul.level0,.navbar ul.level1 {
display:none;
text-align:left;
}
.navbar .dropdown-menu {
border:0;
}
.navbar ul.level1 {
left:150px;
top:0;
}
.navbar-nav > li {
display:inline-block;
}
2. Search
The search file form.mini.phtml is the one you can copy from app/design/ frontend/base/default/template/catalogsearch/.
As usual, we will change the code with the Bootstrap class and the final code will be as follows:
<?php $catalogSearchHelper = $this->helper(‘catalogsearch’); ?>
<form id=”search_mini_form” class=”navbar-form navbar-right”
role=”search” action=”<?php echo $catalogSearchHelper->getResultUrl()
?>” method=”get”>
<div class=”form-group”>
<div class=”input-group”>
<span class=”input-group-addon”><div class=”glyphicon glyphicon-search pull-left”>
</div>
</span>
<input id=”search” type=”text” name=”<?php echo $catalogSearchHelper-
>getQueryParamName() ?>” value=”<?php echo $catalogSearchHelper-
>getEscapedQueryText() ?>” class=”form-control” maxlength=”<?php echo
$catalogSearchHelper->getMaxQueryLength();?>” placeholder=”<?php echo
$this-> (‘Search…’) ?>” />
<span class=”input-group-btn”>
<button type=”submit” class=”btn btn-default”>Submit</button>
</span>
</div>
</div>
<div id=”search_autocomplete” class=”search-autocomplete”></div>
</form>
<script type=”text/javascript”>
//<![CDATA[
var searchForm = new Varien.searchForm(‘search_mini_form’, ‘search’, ‘<?php echo $this-> (‘Search…’) ?>’); searchForm.initAutocomplete(‘<?php echo $catalogSearchHelper-
>getSuggestUrl() ?>’, ‘search_autocomplete’);
//]]>
</script>
The header is now completed and we can now proceed to develop the footer.
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.