Changing positioning of dropdown menus

This isn’t so much a bug or anything, just an edit I’m trying to make but stuck on.

What I’ve got is some top level menus with a normal dropdown, then one which has a full width (940px) static page. I need to align it to the far left, but only this child item, not all. So since each child has a css id relative to it’s magento-id, in this case #childcontent2, I can simply give this div a "margin-left:-131px;". However it doesn’t work, you’ll see in the screenshot the previous menu item (home) has an invisible box going overtop. I’ve tried changing the height of the home, changing z-index for both of them, but neither works.

You’ll see in my screenshot the invisible part.

Do you guys have a solution? Every menu item following the second one doesn’t do this, only previous ones. The screenshot dropdown is coming off of ‘gopro’.

Alternatively if there’s solution to simply align ALL child items to the far left, I’ll just have to make all dropdowns full width instead of mixed.

PS. this is monsieur.

4 answers

Profile photo of Sherlock 0.00 $tone October 29, 2013

Hi kona333,

if you want to apply the change to the mentioned menu item only then you can try as following

1) In your back-end, go to edit the menu item, at the editing form you would see a field name Additional class here you can enter an additional class for the menu item,for example lets enter there a value gopro
2) Now you can add a specific css rule for that menu item,adding this rule to somewhere

HTML Code: li.gopro .childcontent {
                              left: -131px;

also I think you would need to remove that "margin-left:-131px;" you added before to the #childcontent2

I hope this change help !


This question is now closed

Written By