Add Home Link with functional active state to Menu Bar (Alternative Method)

Last modified by pollence on Thu, June 24, 2010 17:02
Source|Old Revisions  

This is an old revision of the document!


UPDATED: Included the following alternative method to add a home link with functional active state to the menu bar.

Add Home Link with functional active state to Menu Bar (Alternative Method)

Find the file called top.phtml in app/design/frontend/default/yourtheme/template/catalog/navigation/ and make the following change:

  1. <div class="header-nav-container">
  2.     <div class="header-nav">
  3.         <h4 class="no-display"><?php echo $this->__('Category Navigation:') ?></h4>
  4.         <ul id="nav">
  5.  
  6.         <!-- ALTERNATIVE HOME BUTTON HACK -->
  7.         <li class="home"><a href="<?php echo $this->getUrl('')?>"><?php echo $this->__('Home') ?></a></li>
  8.         <!-- ALTERNATIVE HOME BUTTON HACK -->
  9.  
  10.         <?php foreach ($this->getStoreCategories() as $_category):?>
  11.             <?php echo $this->drawItem($_category) ?>
  12.         <?php endforeach ?>
  13.         </ul>
  14.     </div>
  15.     <?php echo $this->getChildHtml('topLeftLinks') ?>
  16. </div>

Add the following to the menu.css file in skin/frontend/default/yourtheme/css/. This example is for a CMS home page which uses cms-home class in its body tag.

  1. body.cms-home #nav li.home a { color:#d96708; }

—-ybw

NOTE: The following comments refer to the following methods.


:::: TRIED THIS AND IT ADDS THE LINK, BUT THE ACTIVE STATE DOES NOT FUNCTION CORRECTLY ::::

Special Note to the person(s) responsible for this page. Myself and many others have attempted to use this code snippet to get the result explained with an active state, but have been unable to get the active state to work. The link does work as far as pointing to exsisting cms page or external pages, but the “active” state does not work at all. Page refreshes and all links adjust back to original state.


Add Home Link to Menu Bar

For the Home link in the menu bar of the main template you can add some code to one of the template files.

Find the file called top.phtml in app/design/frontend/default/default/template/catalog/navigation/ and make the following change:

  1. <div class="header-nav-container">
  2.     <div class="header-nav">
  3.         <h4 class="no-display"><?php echo $this->__('Category Navigation:') ?></h4>
  4.         <ul id="nav">
  5.  
  6.         <!-- HOME BUTTON HACK -->
  7.         <?php $_anyActive = false; foreach ($this->getStoreCategories() as $_category) { $_anyActive = $_anyActive || $this->isCategoryActive($_category); } ?>
  8.         <li class="<?php echo !$_anyActive ? 'active' : '' ?>"><a href="<?php echo $this->getUrl('')?>"><?php echo $this->__('Home') ?></a></li>
  9.         <!-- HOME BUTTON HACK -->
  10.  
  11.         <?php foreach ($this->getStoreCategories(10) as $_category):?>
  12.             <?php echo $this->drawItem($_category) ?>
  13.         <?php endforeach ?>
  14.         </ul>
  15.     </div>
  16.     <?php echo $this->getChildHtml('topLeftLinks') ?>
  17. </div>

—-ljj

Add Home Link to Top Links

This will allow you to add a Home link in the Top Links (My Account | My Wishlist | Etc.) before the My Account.

Find the file called links.phtml in app/design/frontend/default/default/template/page/template/ and make the following change:

  1. <?php $_links = $this->getLinks(); ?>
  2. <?php if(count($_links)>0): ?>
  3.     <div>
  4.         <ul<?php if($this->getName()): ?>):?> id="<?php echo $this->getName() ?>"<?php endif;?>>
  5.        
  6.         <!-- HOME BUTTON HACK -->
  7.         <li class="first"><a href="<?php echo $this->getUrl('')?>"><?php echo $this->__('Home') ?></a></li>
  8.         <!-- HOME BUTTON HACK -->
  9.        
  10.             <?php foreach($_links as $_link): ?>
  11.                 <li <?php if($_link->getIsLast()): ?> class="last"<?php endif; ?><?php echo $_link->getLiParams() ?>><?php echo $_link->getBeforeText() ?><a href="<?php echo $_link->getUrl() ?>" title="<?php echo $_link->getTitle() ?>" <?php echo $_link->getAParams() ?>><?php echo $_link->getLabel() ?></a><?php echo $_link->getAfterText() ?></li>
  12.             <?php endforeach; ?>
  13.         </ul>
  14.    </div>
  15. <?php endif; ?>

NOTE: The if statement in the foreach loop has changed since “Home” will always be first, it wasn’t needed. Also note that the <li> for the “Home” link automatically gets the class “first”.

This allows for space between Home | My Account

Related Tags:  Link Home Magento 1.5



 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs