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.

5
  • it is totally css works...
    – Amit Bera
    Commented Aug 26, 2014 at 10:42
  • This could be a solution: stackoverflow.com/questions/11512032/… Commented Aug 26, 2014 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. Commented Aug 26, 2014 at 10:51
  • I'll leave my answer below. Commented Aug 26, 2014 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.... Commented Aug 26, 2014 at 10:56

1 Answer 1

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...

5
  • hi, you are a genius, thanks a lot, it's worked.... Commented Aug 26, 2014 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. Commented Aug 26, 2014 at 11:27
  • I'll edit my response and add some explanations. Commented Aug 26, 2014 at 11:33
  • ya, sure..... okay.... Commented Aug 26, 2014 at 11:33
  • ya, there is lot to learn from you, really your comments gave me some knowledge about menus. thanks a lot. Commented Aug 26, 2014 at 11:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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