Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 2
MOVE THE FOOTER LINKS TO THE TOP NAVIGATION BAR
 
Bill007
Sr. Member
 
Avatar
Total Posts:  179
Joined:  2008-01-15
New Zealand
 

Kia Ora All
Ok this is not as easy as One would have liked Advanced

I wanted to put all the footer page links into the top Navigation and move the Original top category
navigation links to the left hand column purely for SEO and user Functionality
see http://www.greenstone.maori.nz I have worked only on Layout will start Graphic Design next

http://www.magentocommerce.com/boards/viewthread/720/ this is a great tutorial on Moving the Top Nav to the Left hand column

How to add footer page links into the header

So first things first login to you admin Backend

GO TO CMS AND THEN TO Static Blocks >> Add new Block

Call it what you Like I called Mine by this naming convention to start follow mine

Title Top Navigation Links
Identifier top_nav_links

Choose your STORE (FOR ME ALL STORES) ENABLE

Then add this code note I have given the <ul> tag and Id <ul id="nav">so we ca use the same CSS IN MAGENTO

<ul id="nav">
<
li><a href="{{store url=""}}">Home</a></li>
<
li><a href="{{store url=""}}about-magento-demo-store">About Us</a></li>
<
li class="last"><a href="{{store url=""}}customer-service">Customer Service</a></li>
<
li class="last"><a href="{{store url=""}}privacy-policy">Privacy Policy</a></li>
<
li class="last"><a href="{{store url=""}}terms-conditions">Terms and Conditions</a></li>
</
ul>

you will also need to create pages to reflect CMS BLOCK links above

GO TO CMS AND THEN TO MANAGE PAGES >> ADD NEW PAGE

Name them as you Like eg About Us Privacy policy etc the key lay in the Identifier and the title (notice in the block above)
you do not have to create a page for the home Link

Ok this has now created another Block which we will attempt to put it into the header

this is complex so try to hang in there its worth it


Now go to apps/design/frontend/your_interface/your_theme/layout/page.xml

add this code

<block type="page/html_nav" name="nav" as="nav" template="page/html/nav.phtml">
                <!--<
block type="core/store_switcher" name="store_switcher" template="core/stores.phtml"/>-->
                <
block type="cms/block" name="top_nav_links">
                    <
action method="setBlockId"><block_id>top_nav_links</block_id></action>
                </
block>
      </
block>


Example Below page.xml

<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
            <
block type="core/store" name="store" as="store"/>

            <
block type="page/html_head" name="head" as="head">
                <
action method="addJs"><script>prototype/prototype.js</script></action>
                <
action method="addJs"><script>prototype/validation.js</script></action>
                <
action method="addJs"><script>scriptaculous/scriptaculous.js</script></action>
            </
block>

            <
block type="page/html_header" name="header" as="header">
                <
block type="page/html_toplinks" name="top.left.links" as="topLeftLinks"/>
                <
block type="page/html_toplinks" name="top.right.links" as="topRightLinks"/>
             
             <
block type="core/text_list" name="top.menu" as="topMenu"/> 
          
<!-- 
[begin edit] nav block --> 
         
         <
block type="page/html_nav" name="nav" as="nav" template="page/html/nav.phtml">
                <!--<
block type="core/store_switcher" name="store_switcher" template="core/stores.phtml"/>-->
                <
block type="cms/block" name="top_nav_links">
                    <
action method="setBlockId"><block_id>top_nav_links</block_id></action>
                </
block>
                </
block>

<!-- 
[end] nav block --> 
            
</
block>

Now go to apps/design/frontend/your_interface/your_theme/template/page/html/

Create a new file called nav.phtml

Add this code

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * @category   design_default
 * @package    Mage
 * @copyright  Copyright (c) 2004-2007 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
 * @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 */
?>

<div class="header-nav-container">
   <
div class="header-nav">
    
        <
div>
    
<?=$this->getChildHtml()?>  
    <?if
($this->hasSeoLinks()>0):?>
      
<ul id="nav">
       <!--
edit this out as these links not needed-->
<!-- 
<?foreach($this->getSeoLink() as $item):?>                                      
            
<li><a href="<?=$item['url'];?>"><?=$item['title'];?></a></li>
        
<?endforeach;?>-->
        <!--
edit finish-->

      </
ul>
        <
script type="text/javascript">decorateList('footer:seo-links')</script>
       
</div>
    
<?endif;?>      
</div>

Save

Part B is in the next post below

 
Magento Community Magento Community
Magento Community
Magento Community
 
Bill007
Sr. Member
 
Avatar
Total Posts:  179
Joined:  2008-01-15
New Zealand
 

now this is the bit that did my head and 40 hours later this is what I learnt

that the CMS Blocks are controlled thru


apps/code/core/Mage/Page/Block/Html

CREATE A new file in the block folder called Nav.php {note you must use a capital N IN Nav.php}

and paste the following code into it

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * @category   Mage
 * @package    Mage_Page
 * @copyright  Copyright (c) 2004-2007 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
 * @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 */

/**
 * Html page block
 *
 * @category   Mage
 * @package    Mage_Page
 */
class Mage_Page_Block_Html_Nav extends Mage_Core_Block_Template  /* this needs to reflect the new name of the block file so for me Nav*/
{
    
protected $_seolinks;

    protected function 
_prepareLayout()
    
{
        parent
::_prepareLayout();
        
$this->initSeoLink();
    
}
       
    
public function setCopyright($copyright)
    
{
        $this
->_copyright $copyright;
        return 
$this;
    
}
    
  
public function getCopyright()
    
{
        
if (!$this->_copyright{
            $this
->_copyright $this->getDesignConfig('page/nav/copyright');
        
}
            
        
return $this->_copyright;
    
}
   
    
public function getSeoLink()
    
{       
        
return $this->_seolinks;   
    
}
    
    
public function setSeoLink(array $varName)
    
{
        $this
->_seolinks=$varName;
    

    
    
public function addSeoLink(array $varName)
    
{
        $this
->_seolinks[]=$varName;
    

    
    
public function hasSeoLinks()
    
{
        
return count($this->_seolinks);
    
}  
    
    
public function initSeoLink()
    
{
        
if(Mage::getStoreConfig('catalog/seo/site_map')){
            $seolink[
'title']=$this->__('Site Map');
            
$seolink['url']=$this->helper('catalog/map')->getCategoryUrl();
            
$this->_seolinks[]=$seolink;            
        
}
        
if(Mage::getStoreConfig('catalog/seo/search_terms')){
            $seolink[
'title']=$this->__('Search Terms');
            
$seolink['url']=$this->helper('catalogSearch/data')->getSearchTermUrl();
            
$this->_seolinks[]=$seolink;            
        
}     
    }
}

Now go to in your template/page/html/header.phtml

these lines of Code reside at the bottom of the header.phtml file

Comment out the following line

<!--<?=$this->getChildHtml('topMenu')?> adds links into the top header-->
Add this new
line <?=$this->getChildHtml('nav')?></code>

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * @category   design_default
 * @package    Mage
 * @copyright  Copyright (c) 2004-2007 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
 * @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 */
?>

<div class="header-top-container">

    <
div class="header-top">
        <
h1 id="logo"><a href="<?=$this->getUrl('')?>"><img src="<?=$this->getLogoSrc()?>" alt="<?=$this->getLogoAlt()?>"/></a></h1>
        <
class="no-show"><a href="#main"><strong><?=$this->__('Skip to Main Content')?> &raquo;</strong></a></p>


        
<?=$this->getChildHtml('topSearch')?>


        
<div class="quick-access">
            <
div class="account-access">
               <
strong><?=$this->getWelcome()?></strong>
               
<?=$this->getChildHtml('topLeftLinks')?>
             
            
</div>
            <
div class="shop-access">
                
<?=$this->getChildHtml('topRightLinks')?>
           
            
</div>
        </
div>

    </
div>
</
div>
 <!--
<?=$this->getChildHtml('topMenu')?> adds links into the top header-->
<?=$this->getChildHtml('nav')?>

Ok so this should have put your footer links into the top navigation and be
present on every page no mater what page template you are using

Yeah That is cool big surprise

 
Magento Community Magento Community
Magento Community
Magento Community
 
Bill007
Sr. Member
 
Avatar
Total Posts:  179
Joined:  2008-01-15
New Zealand
 

Now it will look a bit messy so lets get the page style sorted

Find menu.css

and add this style code

#nav { padding:0 50px; font-size:1.1em; z-index:999;  margin-left:200px;}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * @copyright  Copyright (c) 2004-2007 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
 * @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 */

#nav { padding:0 50px; font-size:1.1em; z-index:999;  margin-left:200px; }               /* edtited here*/


/************** ALL LEVELS  *************/ /* Style consistent throughout all nav levels */
#nav li {
    list-style:none;
    
position:relative;
    
text-align:left;
    
}
#nav li.over { z-index:99; }
#nav li.active { z-index:999; } /* to prevent the li separator from showing through on mouseover on li */
#nav a { line-height:1.3em; width:}
#nav a, #nav a:hover { display:block; text-decoration:none; }
#nav span { display:block; cursor:pointer; }


/************ 1ST LEVEL  ***************/
#nav li { float:left; }
#nav li.active a { color:#d96708; }
#nav a { float:left; padding:5px 12px 6px 8px; color:#A7C6DD; font-weight:bold; }
#nav li.over a, #nav a:hover { color:#d96708; }


/************ 1ST LEVEL RESET ************/
#nav ul li, #nav ul li.active {
    
float:none;
    
height:auto;
    
background:none;
    
margin:0;
    
}
#nav ul a, #nav ul a:hover {
    
float:none;
    
padding:0;
    
background:none;
    
}
#nav ul li a { font-weight:normal !important; }


/************ 2ND LEVEL ************/
#nav ul {
    
positionabsolute;
    
width:15em;
    
top:25px;
    
left:-10000px;
    
border:1px solid #899ba5;
}

/* Show menu */
#nav li.over ul { left:0; }
#nav li.over ul ul { left:-10000px; }
#nav li.over ul li.over ul { left:100px; }

#nav ul li a { background:#ecf3f6; }
#nav ul li a:hover { background:#d5e4eb; }
#nav ul li a span { background:url(../images/nav_divider.gif) repeat-x 0 100%; }
#nav ul li a, #nav ul li a:hover { color:#2f2f2f !important; }
#nav ul span, #nav ul li.last li span { padding:3px 15px 4px 15px;}
#nav ul li.last span { background:none; }

/************ 3RD+ LEVEL ************/

#nav ul ul { top:5px; }
#nav ul ul ul { left:-10000px; }
#nav li.over ul li.over ul ul { left:-10000px; }
#nav li.over ul li.over ul li.over ul { left:100px; }


/* Fix for the IE bug */

#nav iframe {
positionabsolute;
left: -1px;
top0;
z-index: -1;
filterprogid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
 
Magento Community Magento Community
Magento Community
Magento Community
 
Bill007
Sr. Member
 
Avatar
Total Posts:  179
Joined:  2008-01-15
New Zealand
 

Well after some head scratching to get Magento ver. 0.8.16100 up and running

all of this work held up so if you want this look or one like try follow this tutorial

http://www.greenstone.maori.nz new version Starting to work on design my Lay out is nearly there

Bill007 http://www.euphorish.com web design free-bees

 
Magento Community Magento Community
Magento Community
Magento Community
 
leetaylordoes
Sr. Member
 
Total Posts:  227
Joined:  2008-02-05
San Diego, CA
 

Hey there Bill,

Thanks for your time and effort in posting your findings! I’ve got a question to follow up with though.
This allows full control of the main navigation as a static block, right? So that requires anyone to go in and add a link to a product category (and or sublevel) each time they want to change the product categories...correct?

Would there be a way to allow product categories to automatically be updated (as Magento natively allows) while still adding links to the right of the product categories via a static block (in the main nav)?

Thanks for your thoughts my friend…
- Lee Taylor

 
Magento Community Magento Community
Magento Community
Magento Community
 
devx
Jr. Member
 
Total Posts:  20
Joined:  2007-08-31
 

Hi Bill,
Thanks for posting this up, i really appreciate it grin

However, it doesn’t seem to be working in version 1. Has anyone tried using it (in v1)? Thank you

 
Magento Community Magento Community
Magento Community
Magento Community
 
tropikai
Jr. Member
 
Avatar
Total Posts:  11
Joined:  2008-04-09
 

I tryed...and screwed up :(

 
Magento Community Magento Community
Magento Community
Magento Community
 
regispatuto
Jr. Member
 
Total Posts:  21
Joined:  2008-02-22
 

This works great on 1.0. 

Quick question, essentially this makes it so the top Nav is a static block.  This is really useful, but does anyone know how to code it so if you redo the Nav Bar as a static block, it will still retain the ability to “sense” what page is being displayed, and “highlight” the nav correctly?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Tiff
Sr. Member
 
Avatar
Total Posts:  107
Joined:  2008-03-25
Upstate NY
 

I’m trying to get this menu right underneath the “My Account | My Wishlist” menu.... I uncommented the part of the header which was for the regular category nav and moved the new get child line into the header itself.  But my menu items don’t show!

Any ideas?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Tiff
Sr. Member
 
Avatar
Total Posts:  107
Joined:  2008-03-25
Upstate NY
 

NM… I actually decided to dicth all of this and add html links to quick-access menu.

 
Magento Community Magento Community
Magento Community
Magento Community
 
xiaolin
Member
 
Total Posts:  47
Joined:  2008-05-04
 

i did but it seems doesnt work with v1.0 . any ideas?

 
Magento Community Magento Community
Magento Community
Magento Community
 
pauld
Member
 
Avatar
Total Posts:  38
Joined:  2008-04-20
Port Melbourne, Australia
 

For those who couldn’t get this to show (and I had this problem);

you MUST put the pasted code block in page.xml directly after this line:
<block type="core/text_list" name="top.menu" as="topMenu"/>

and it all works without modification in;
ver. 1.0.19870

Well done Bill

 
Magento Community Magento Community
Magento Community
Magento Community
 
adam777
Member
 
Total Posts:  38
Joined:  2008-05-08
 

grin Works perfectly first time in ver. 1.0.19870, except the footer links are no longer centred....

 
Magento Community Magento Community
Magento Community
Magento Community
 
plainspace
Jr. Member
 
Avatar
Total Posts:  23
Joined:  2008-01-23
 

Kia Ora Bill,

Wow.  Amazing!  I’m new here, but from what I can tell you are an amazing asset to the Magento community.  Thanks! 

I have a couple of questions that I’m wondering if you’ve covered.  First, I would like to create drop down menus for a couple of the menu items (for instance: about us > about vicki, testimonials, press, parnters.) Second, out store is going to be short on products.  We will be selling about 10 audio downloads, a few coaching options and one CD/DVD/workbook program to purchase.  I would like to use the static navigation that you provided a solution for above AND the product navigation for audios, coaching and the program mentioned above.  I am not in the habit of looking gift horses (you) in the mouth so if the solution is a paid solution, I’d be happy to oblige.

Thanks!

Jared

UPDATE: I solved the first issue with regards to dropdowns - new menu structure and CSS.  I’m still looking to add the product navigation back to the new top_nav_links static block. My hunch is that it has something to do with <?=$this->getChildHtml('topMenu')?> and catalog/navigation/top.phtml where the catalog navigation gets set.  I’d like to add the catalog navigation to the top_nav_links dynamically.  Can anyone point me in the right direction? 

 
Magento Community Magento Community
Magento Community
Magento Community
 
plainspace
Jr. Member
 
Avatar
Total Posts:  23
Joined:  2008-01-23
 

Lee,

Did you figure this out?

timothyleetaylor - 13 March 2008 01:11 PM

Hey there Bill,

Thanks for your time and effort in posting your findings! I’ve got a question to follow up with though.
This allows full control of the main navigation as a static block, right? So that requires anyone to go in and add a link to a product category (and or sublevel) each time they want to change the product categories...correct?

Would there be a way to allow product categories to automatically be updated (as Magento natively allows) while still adding links to the right of the product categories via a static block (in the main nav)?

Thanks for your thoughts my friend…
- Lee Taylor

 
Magento Community Magento Community
Magento Community
Magento Community
 
ow3npiccirillo
Jr. Member
 
Total Posts:  15
Joined:  2008-06-15
 

Doesnt work.

I followed the exact directions.

Now there is no navigation. its just blank

HELP?

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 2