Accordion Style Navigation for Mobile

Support
#1

Hey you all, I will be working on a site with a navigation that has longer sub-menu link names. The existing style mobile navigation that expands off to the side will not work with the longer link names. Is there any way I can have it drop into an accordion style menu similar to the older style you had previously?

This is a link to a screenshot to show what I mean:

#2

Hello, @Boans,

Thanks for writing to us.

Regretfully the behavior of the navigation layered, navigation collapse and other navigation elements will always close the submenu even if one of the submenu items is the current page item.

Thanks for understanding

#3

Thanks, but I’m not sure I conveyed myself properly, I am trying to find a way to have my navigation open as an accordion (stacked) which is the image to the right of my screenshot - rather than have sublinks open to the side.

Is there any way that can be achieved?

#4

Hi @Boans,

This can be done with some customization. Regretfully, customization is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

Thank you.

#5

Thanks again and sorry to be so repetitive, but just to make sure … there really is no configuration setting I can use to make any kind of accordion style dropdown? It doesn’t have to look the same as the one I posted, just not pop out to the side.

Is there some type of Megamenu option for this?

I guess there is no way to just install your legacy Mobile Navigation module into the new header? I don’t mind paying for the One option, but I’d like to know what the options are if possible.

#6

Hey @Boans,

As of Pro v4.3.0, X v8.3.0, and Cornerstone v5.3.0, you can find the Prefab Mega Menu Elements in the builder. You can check the documentation here https://theme.co/docs/mega-menu or you can follow the video tutorial here https://www.youtube.com/watch?v=zgAMBLRxG_w

You may also want to check out https://theme.co/docs/set-up-megamenus

Hope this helps!

#7

Thanks, this may help but is there a way to make the Mega Menu Dropdown Element act as the Mobile navigation in my Header? (the Dropdown element shown in the video you linked)

I’d like to replace my sites mobile navigation with this.

#8

Hey @Boans,

If you’re using Pro, edit your header and add two Bars (one for desktop screens and one for mobile devices) or to make things simple duplicate your Desktop Bar to have the same Bar setup and rename it to let’s say Mobile Bar (see screenshot)

image

Inspect your Mobile Bar and remove your current Navigation element and add Mega Menu element in replace of your Navigation element

In the Mobile Bar settings and go to Customize tab and hide it for large screens (see screenshot)

image

Now you need to hide the desktop bar in smaller screens, to do this repeat the above process for Desktop Bar and hide your desktop menu in small devices.

image

Alternatively the setup you need for mobile devices is already a part of original headers, so you can simply un-assign all of your headers in the header builder to activate the original headers that has the same accordion style mobile navigation (see live demo here https://demo.theme.co/integrity-business/)

Hope this helps!

#9

Perfect thanks!

#10

Hi @Boans,

Glad that we are able to help you.

Thanks

#11

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