Tuesday, November 15, 2011

Magento : Adding a home link to the menu bar


There are following step:
1. Now look for the top.phtml file in app/design/frontend/YOUR_PACKAGE/
YOUR_THEME/template/catalog/navigation/ directory. In my case, the
absolute path of top.phtml file for active default theme is: /var/www/magento.
local.com/public/app/design/frontend/base/default/template/
catalog/navigation/.
2. The code should look like this:
<?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>
<?php if($_menu): ?>
<div class="nav-container">
<ul id="nav">
<?php echo $_menu ?>
</ul>
</div>
<?php endif ?>
3. Next, let's add the new alternative home link now. Add the following code snippet
before the foreach loop:
<!-- NEW HOME LINK -->
<li class="home"><a href="<?php echo $this->getUrl('')?>"><?php
echo $this->__('Home') ?></a></li>
<!-- NEW HOME LINK -->
4. After the changes, now the top.phtml file should look like this:
<?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>
<?php if($_menu): ?>
Chapter 2
25
<div class="nav-container">
<ul id="nav">
<!-- NEW HOME LINK -->
<li class="home"><a href="<?php echo $this-
>getUrl('')?>"><?php echo $this->__('Home') ?></a></li>
<!-- NEW HOME LINK -->
<?php echo $_menu ?>
</ul>
</div>
<?php endif ?>
5. Next, we will add some CSS style for the active state of our home link like other
menus in the top navigation bar. Find the styles.css file from the skin/
frontend/YOUR_PACKAGE/YOUR_THEME/css/ directory and open it. In my case,
the location of styles.css file is: /var/www/magento.local.com/public/
skin/frontend/default/default/css.
6. Now append the following line at the end of styles.css file:
body.cms-home #nav li.home a { color:#d96708; }
7. Reload the home page and see the changes. A new home menu will appear:

No comments:

Post a Comment