Magento has a strong caching mechanism to serve the pages faster. By default, Magento sets
the caching as enabled. We have to disable the caching feature to view the changes after
necessary modification. At development, the environment will keep the caching disabled. To
disable the caching, go through the following steps:
1. Log in at your Magento Admin Panel and point your browser to System | Cache
Management.
2. Click on the Select All link to select all rows.
3. Select Disable from the Actions dropdown.
4. Click on the Submit button to save the changes.
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): ?>
<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: