change default menus position in CE1.7.0.2

Question

I want to change position of default menus. I have live site backup on local workstation(wamp). Need to change the defaults menus which is top of the home page(i.e. above the logo). I want it in front of logo ie. in columns. In below image, showed what exactly i want. As am newbie to mangeto, i don't know how to make changes. Can anybody please help me.

Answer 1

First, I suggest you enable template path hints. Go to admin->system, change the current configuration scope to one of your stores (near the top left), then click developer (developer is in the bottom left). Then in the Debug menu in the center, change Template Path Hints to Yes. This allows you to see which template phtml files serve which parts of your frontend.

The first phtml file to check is probably template/page/html/header.phtml then topmenu.phtml.

You should also look in layout/page.xml and layout/local.xml, where you can chop and change blocks, just ctrl+find the template files, header, topmenu etc.

You can change the css, put in the relevant part in local.xml

<layout>
<default>
    <reference name="root">
        <reference name="head">
            <action method="addCSS"><stylesheet>css/local.css</stylesheet></action>
        </reference name="root">
        </reference name="head">
</default>
</layout>

Then in skin/frontend/pathtoyourtheme/css/local.css you can implement your css changes.

(right click Inspect element is your friend. Change some of the values to test out how to move the menu. You'll probably want to try out css configurations of display (e.g. inline-block), float and position, along with reordering html elements like header-nav, header-logo etc.)

Make sure you're editing your own theme's files, not the default ones.