[Resolved] Menu items with same width and working in mobile version

Home Forums Support Menu items with same width and working in mobile version

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1362271
    Alberto

    Hello
    I’ve got and issue in my website. I need all the menu items with the same width so I’ve been working with CSS but maybe I may not have achieved the best solution, because I can’t visualize the submenu items in mobile version.
    I’m also not able to vertically align the text in menu item. Using table-cell the submenu is moved to the next menu item…
    You can see the website content using password AYO2002m

    Thanks in advance

    #1362300
    Leo
    Staff
    Customer Support

    Hi there,

    Can you confirm the website URL?

    It’s not working for me.

    #1362765
    Alberto

    Hi, Leo
    **

    Thank you

    #1363355
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1363474
    Alberto

    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

    #1363627
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    #1364546
    Alberto

    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!

    #1364907
    Tom
    Lead Developer
    Lead Developer

    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.

    #1374991
    Alberto

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

    Regards

    #1375266
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.