Navigation Dropdown Menu: Submenu/Children are displayed wrong

Hi there,

I’d like to create a dropdown menu which expands vertically and not side ways. Atm the submenu is expanding to the right (see shadow the right side on provided screenshot)

Any ideas how to expand the submenu between the main menu? I couldn’t find an option for that.
Many thanks in advance.
Jannes

Hello @jannesth,

Thanks for asking. :slight_smile:

Can you please share website URL for us to take a closer look?

Thanks.

Hi Prasant,

Just published an unlisted sample page, it is just about the header in the mobile and smaller tablet view. Thanks for helping out!

http://jannesthiesgick.de/join-us/

Hi There,

To fix this issue, please add this custom CSS under Pro > Theme Options > CSS:

ul#e305-22-dropdown ul.sub-menu.x-dropdown {
    left: auto;
    top: 100%;
}

Regards!

Hi Thai,
Thanks a lot for the quick responds, it worked fine! Thanks for your help.
Happy easter, and a lovely day!
Regards, Jannes.

You’re welcome.

Another quick question, now it is an overlay over the menu. Is it somehow possible to squeeze the submenu between the menu? :slight_smile:

Hi there,

Would you mind clarifying what you are trying to achieve so that we can provide some suggestions?

Thank you.

Hi Jade,
sure I’ll try my best to explain what I’d like to achieve. At the moment (Img: NOW) the dropdown menu of my submenu is creating automatically an overlay over the main menu, so you can’t see in this example no 3-5. I’d like to expand the submenu and squeeze it in-between 2 and 3 so no 3-5 is visible below and not hidden.

I hope that the illustration helps, any further questions let me know.
Thanks for your help. :blush:

Hi There,

Thank you for the clarification, the Navigation Dropdown is not advisable for mobile view. Let’s hide the Navigation Dropdown menu on mobile view and swap it with a Navigation Collapsed.

To do this, add a Navigation Collapsed next to the Navigation Dropdown, configure the Navigation Collapsed.

Then let’s hide the Navigation Collapsed on desktop view using the Hide During Breakpoints feature.


Do the opposite for the Navigation Dropdown, so you can hide it on mobile.


Hope that helps,
Cheers!

Hi Friech,

Thanks for helping me out, I have changed what you have suggested I have now the feature that the submenu is expanding. But the collapse navigation is just configured as an overlay from left/right and not as a menu which expands towards the bottom like the dropdown menu. Any possible fixes to change the location of the canvas to middle (or bottom)?

Regards. :slight_smile:

Hi there,

Unfortunately, it is not possible to have that kind of opening using the Navigation Collapse. You can use the Navigation Modal for the purpose but then you will not be able to see your submenus.

Thank you for your understanding.

Hi Christopher,

Thanks for your fast responds, I might just leave it then the way it is or maybe try myself to fix if I find the time. Thanks anyway!

Kind regards, Jannes

You’re welcome! :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.