Question

I’m trying to add a secondary menu bar besides the main menu bar because I want to keep the main menu with all the categories listed and then an individual menu per website/store within the same magento shop. The theme I’m using already comes with a menu widget and I sort of accomplish what I wanted but I have a little CSS styling issue. let me explain.

In order to have two menus, I did the following.

1. Copied community/Company/MenuWidget to local/MyCompany/MyMenuWidget
2. replaced all the references in all the files found under Block, Helper, etc, controllers, Model, that pointed to Company_MenuWidget to MyCompany_MyMenuWidget. I basically cloned the Menu Widget.
3. Added the following lines to css.xml under

< reference name=”header” >

< block type=”cms/block” name=”cms_my_menu_block” >

< action method=”setBlockId” >< block_id>my_menu_block < /block_id ><
/action> < /block>

1. Added the following line to header.phtml

< div class=”my-class” >< ?php echo
$this->getChildHtml(‘cms_my_menu_block’) ?>< /div>

1. Added a class to the CSS styles sheet ‘my-class’ with the same values of the nav-container class and then modified the valued to position the menu where I wanted it.

2. duplicated the MenuWidget styles sheet and renamed it as needed.

3. Created a block with the identifier for the store/website I wanted it to show up and it did.

Now the problem I’m facing is that the original menu is partially picking up the copied styles sheet so modifications I do to the copy, is partially affecting the main, not all the modifications. For example, I was able to move the container down and position it but now the “dropdown pop-ups” which I had to reposition as well, are being affected on both menus when I move them.

How can I completely separate the style sheets? I’m not even sure why the other menu bar is picking up on the new style sheet.

Any help is appreciated it.

Answer 1

The reason the “other” menu is reacting to both stylesheets is because both stylesheets are loading and you probably didn’t change the classes/ids. You can remove the other one using your local.xml probably in the default reference:

<reference name="head">
    <action method="removeItem">
        <type>skin_css</type>
        <name>css/path/to.css</name>
    </action>
</reference>

A beter way to handle this would be to let the other menu do its thing and override the parts you want to with your own module. I think how to do that is out of the scope of this/any answer, though.