OnPoint Plugins

← Back to support

Closed Accordion On Mobile And Styling Assistance

Resolved

Requested: 2 years and 3 months ago

Hi,

I was wondering if you could give me some advice for customizing my menu?

I would like it to look like: https://www.lutherrice.edu/degree-programs/

Basically, I am trying to add bottom borders to all of the child menu items and adjust the padding so that the parent and children titles line up.

Also, have you considered adding a mobile view option where the menu reverts to an accordion view showing only the parent page?  The lutherrice.edu menu shows a good example of this.  Would this be possible?

Thanks for your help,
Daniel

  1. Hi Daniel,

    Here is the CSS you need to add borders and align the menu items

    To accomplish a closed accordion on mobile you may add another widget to the sidebar with the options to include the highest level parent in the accordion and keep all closed. Then add the following css to show/hide the correct widget based on screen width:

    Have a great day!

    Mat Lipe

  3. Another question…what would be the best way to set a minimum width for the mobile version of the menu?  As you can see on the page, the mobile version looks quite small.

  5. Hi Mat – How would the closed accordion menu on mobile be implemented with Elementor? I’ve tried to duplicate the widget and then set it to hide on desktop/mobile respectively, but it seems that the top widget inherits the style of the second widget. So if widget #2 has it set to keep all sections closed, but widget #1 does not, widget #1 will still inherit the keep all sections closed feature.

  6. Hi David,

    I am not familiar with Elementor, but from what you are saying, it sounds like instead of using a Duplicated widget you will want to use a second separate widget with it’s own settings.

    Hope this helps!

    Mat Lipe

Respond