0

please visit my site link

In POWER TOOLS category, go for FESTOOL Sub-category. You can see DRILLING AND FASTENING sub-sub Category there. But thoseDRILLING AND FASTENING sub-sub category is not visible properly as it is present after monitor width.

What I need to do is, when we hover mouse on FESTOOL, I want to display DRILLING AND FASTENING sub-sub Category and other sub-sub categories on left side. If Possible, I want to do these changes only for POWER TOOLS category in my site, so that every category menu link is visible directly in my site.

Please help me to find solution.

Let me know if you have any queries.

Thanks in advance.

  • it is totally css works... – Amit Bera Aug 26 '14 at 10:42
  • This could be a solution: stackoverflow.com/questions/11512032/… – Samuel Coman Aug 26 '14 at 10:44
  • thanks @SamuelComan in what file i have to edit , is it in theme.css , can we use inspect element to find solution. – Baby in Magento Aug 26 '14 at 10:51
  • I'll leave my answer below. – Samuel Coman Aug 26 '14 at 10:54
  • @SamuelComan , can you help me , in what file, what code i have to edit? please help me for that.... thanks in advance.... – Baby in Magento Aug 26 '14 at 10:56
2

The url I mentioned (https://stackoverflow.com/questions/11512032/detect-if-dropdown-navigation-would-go-off-screen-and-reposition-it) uses a JS + CSS solution. This means, beside editing a css file, you would have to create a js file or add that js to a phtml file in your template.

If you don't need a general solution, a quick CSS solution which will work only for that specific menu is:

   .header-nav-container-home ul.nav-menu li.nav-5-1 ul li.parent:hover ul {
       left: -100%;
   }

Add this line at the end of menu.css.

EDIT

CSS selectors explanation:

.header-nav-container-home ul.nav-menu - main menu

.header-nav-container-home ul.nav-menu li.nav-5-1 - first child of the fifth menu item (in your case Festool)

.header-nav-container-home ul.nav-menu li.nav-5-1 ul li.parent:hover ul - every sub- submenu of Festool

So, I told the browser to reposition only the sub, sub-menus of Festool. Want every sub- sub-menu of Power Tools, change "nav-5-1" to "nav-5". The rule then becomes:

  .header-nav-container-home ul.nav-menu li.nav-5 ul li.parent:hover ul {
   left: -100%;
  }

And so on...

  • hi, you are a genius, thanks a lot, it's worked.... – Baby in Magento Aug 26 '14 at 11:21
  • hi, one liitle change i needed. if you go for "Power tools => "festool" its not working. but it's working for "Power tools => festool => jigsaws" . please help me to find solution. – Baby in Magento Aug 26 '14 at 11:27
  • I'll edit my response and add some explanations. – Samuel Coman Aug 26 '14 at 11:33
  • ya, sure..... okay.... – Baby in Magento Aug 26 '14 at 11:33
  • ya, there is lot to learn from you, really your comments gave me some knowledge about menus. thanks a lot. – Baby in Magento Aug 26 '14 at 11:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.