Menu items with same width and working in mobile version

Hi there,

Can you confirm the website URL?

It's not working for me.

Hi, Leo
**

Thank you

Hi there,

This may help for the centering:

.main-navigation ul#menu-menu-principal li {
    display: flex;
    align-items: center;
    justify-content: center;
}

As for mobile, not sure what you're wanting it to look like, but this may help:

.main-navigation.toggled ul#menu-menu-principal li {
    width: auto;
    display: flex !important;
}

Hi Tom!
Thanks a lot for replying!
The centering solution works fine, but the mobile doesn't work. I need the submenu to expand, to see the subitems, i.e., if I click Sobre AYO I want to get access to Mision, Valores...

Thanks in advance

Hi there,

The site doesn't seem to be loading anymore (server IP not found).

Hi Tom!
I don't understand you... Server IP not found?
Please, take a look here: https://proyectoayo.org/sobre-ayo (Pass: AYO2002m)
Particularly in the mobile version, because I can't see the menu subitems.
How can I do to show the chevron icon in each menu item so when I click in mobile versions I could get access to submenu items?

Thanks in advance!

The site wasn't loading when I last checked.

It's quite difficult as you have a lot of custom CSS going on. What I would do is is add :not(.toggled) to all of your sub-menu CSS you don't want to apply on mobile.

For example, you're hiding the arrows like this:

.main-navigation ul#menu-menu-principal li.fond-negro ul.sub-menu

You could do this instead:

.main-navigation:not(.toggled) ul#menu-menu-principal li.fond-negro ul.sub-menu

That will make it so it only applies on desktop.

There's quite a few things you might need to do this to throughout your existing custom CSS.

Hi Tom!
Apologies for the delay in replying.
Your suggestion is good for me, thanks a lot!

Regards

You're welcome :)