vertical menu every page & Header menu navigation

Question

I am trying to customize header menu and vertical menu (left menu) in Magento cms

When i click on the category, i will be redirected to next page but the complete list of categories is no more displayed on that page. I just want the complete list to be displayed on all pages that a user is being navigating through the categories list.

i am using below code on CMS -> Pages -> Homepage -> design->Layout Update XML

<reference name="left">
    <!--<block type="catalog/navigation" name="catalog.leftnav" after="currency" template="catalog/navigation/left.phtml"/>-->
        <block type="catalog/navigation" before="-" name="catalog.vertnav" template="catalog/navigation/vert_nav.phtml"/>
</reference>

how to display the left menu in all pages and how to customize header menu like HOME ABOUT US Blog

I also posted the same question on stackoverflow, Please look at these fr screen shots

Please suggest me for developing good looking magento website

Answer 1

If you look at /design/frontend/base/default/template/catalog/navigation/left.phtml you will see this code:

...
<?php $_categories = $this->getCurrentChildCategories() ?>
...

It means you can get categories which are descendants of current category. You should create own left navigation menu. It's quite simple.

/design/frontend/default/yourtheme/template/catalog/navigation/left.phtml

<?php
    $_menu = $this->renderCategoriesMenuHtml(0, 'level-top');
?>
<?php if($_menu): ?>
    <div class="category">
        <div class="title"><?php echo $this->__('Category menu:') ?></div>

        <ul class="submenu">
            <?php echo $_menu ?>
        </ul>
    </div>
<?php endif ?>

In this case you set the root category as a parent and you will see all your navigation tree in the left sidebar.

You could remove category navigation from top menu to custom it. There a lots of way. In my case I needed create own menu: /design/frontend/base/default/layout/page.xml

<block type="page/html_header" name="header" as="header">
  ...
  <block type="core/text_list" name="top.menu" as="topMenu" translate="label">
                    <label>Navigation Bar</label>
                    <block type="page/html_topmenu" name="catalog.topnav" template="page/html/topmenu.phtml"/>
                </block>
   ...
</block>

to

<block type="page/html_header" name="header" as="header">
     <block type="page/html_wrapper" name="top.header.menu" as="topHeaderMenu" translate="label">
          <label>Top Menu</label>
          <action method="setElementClass"><value>header_menu</value></action>                            
          <block type="page/template_links" name="custom.menu.links">
                <action method="addLink"><label>Home</label><url>/</url><title>Home</title><prepare></prepare><urlparams></urlparams><order>10</order></action>
                 ...
          </block>
     </block>
</block>

If you use category items in the top menu you should create some node in the category tree specialy for top menu. And call it like we did for left menu navigation.

UPDATE: You could reference to head to apply your css:

<reference name="head">
    <action method="addItem"><type>skin_css</type><name>css/your_style.css</name><params/></action>
</reference>