Center mobile main-menu text and use menu text as dropdown-event

Hey, I just set up our new Website with your perfect Theme Astrid.

Besides the really good functions there is a little issue i can’t fix:

The Main-Menu on mobile devices is shown as a long Drop-Down-List with little arrows to open the second menu-level. The first thing here is, that the headlines are not in the center, because the arrows affect the centering, so all menu-items with a arrow aside are not in center. How can i fix this?

Also i want the menu-items (as they are no links, but not-clickable text-only) to have the same functionality as the arrows. So if i touch the menu-items on a mobile device, the second menu-level should be shown.

I would appreciate if you could give me some hints for this little issues. The Website i am referring to is http://neu.besoplan.de

Hello @besoplan,

  1. Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

nav#mainnav-mobi span.btn-submenu {
    position: absolute;
    line-height: 0.9;
}
  1. It looks like this issue requires some coding and testing, this goes beyond our support policy. It’s considered advanced customization. As an option, you can find a reputable freelancer on Upwork for this kind of service.

Kind Regards, Roman.

Thanks a lot Roman!
Your CSS-Code worked perfectly

Greetings from Germany :slight_smile:

Great, you are welcome @besoplan! And have a nice day :slight_smile:

Kind Regards, Roman.