Main menu horizontal/vertical dropdown

[SectioPrima]

Hey, can someone tell me how to make the main menu dropdown vertical, not horizontal. Can't find a module for that in here.. Is it nor possible?
See pic for details,

Ty.

[Rolige]

Yes you can, in the file: /themes/classic/assets/css/theme.css

Find a code like this:

.top-menu .sub-menu ul[data-depth="1"]>li {
  float: left;
  margin: 0 1.25rem;
}

And remove or comment: float: left;

 

Regards!

[doslonce]

Hi. And how to prevent the full width of the subcategories from being displayed?

[Paul Buisson]

On 11/29/2021 at 4:46 AM, doslonce said:

Hi. And how to prevent the full width of the subcategories from being displayed?

i put this at the end of the theme.css 

@media screen and (min-width: 768px) { /* stop subcategory depth at 2 for desktop, but allow mobile to expand accordingly */
    .top-menu[data-depth="2"]{
        display:none!important;
    }
}
.top-menu .sub-menu ul[data-depth="1"]>li{float:none;} /* removes left justification */
.top-menu .sub-menu {width: auto; min-width: auto;} /* removes full active area width from subcategory dropdown width */
.popover {left: unset;} /* removes the forcing of dropdown to left of page active area lets dropdowns align with top nav */

 

Edited December 6, 2021 by Paul Buisson
better info added (see edit history)

[Paul Buisson]

i also found it necessary to put this at the end of theme.css to get the expansion caret out of longer subcategory names on the left nav within a category page

.block-categories .collapse-icons {right: -30px;}

 

[doslonce]

Works great. That's what it was about, thank you. What else to add so that when you hover the cursor over a category, subcategories are below.

[Paul Buisson]

On 12/7/2021 at 4:18 AM, doslonce said:

Works great. That's what it was about, thank you. What else to add so that when you hover the cursor over a category, subcategories are below.

i didn't bother to have categories in the dropdown auto expand to show subcategories, let visitor click to drill down.

[Gianchy]

Fantastic dropdown menu modification for Classic theme.
I've a problem as shown in the attached image.

For the first line of the top menu the dropdown works good (see dropdown menu when I move the mouse on "UTENSILI" item)
But if I add other items to my top menu, they go in the second line and the dropdown menu fails (see dropdown menu when I move the mouse on "IDEE REGALO" item).

Please could someone help me to solve this problem?

[Gianchy]

On 8/31/2023 at 11:55 AM, Gianchy said:

Fantastic dropdown menu modification for Classic theme.
I've a problem as shown in the attached image.

For the first line of the top menu the dropdown works good (see dropdown menu when I move the mouse on "UTENSILI" item)
But if I add other items to my top menu, they go in the second line and the dropdown menu fails (see dropdown menu when I move the mouse on "IDEE REGALO" item).

Please could someone help me to solve this problem?

Please, help me to solve this problem.
Thank you