[Resolved] Submenus styling

Home Forums Support [Resolved] Submenus styling

Home Forums Support Submenus styling

Viewing 15 posts - 16 through 30 (of 33 total)
  • Author
    Posts
  • #844328
    David
    Staff
    Customer Support

    Hi there,

    its because the parent menu items that have a submenu do not contain a URL. If you add # as the URL then they should trigger the drop down on mobile.

    #844740
    Harris

    Thanks David!
    I added it and its ok.

    One more question.

    Do you have any sugestions on how can I handle in the mobile menu the 3rd menu option (Έργα) that is clickable (link) and the sub-menus appear on hover in the desktop view?

    Thanks

    #845043
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Not too sure what you mean – can you explain a bit more?

    #845139
    Harris

    The submenus in the 3rd menu choice can’t open in the mobile menu view, as the (3rd) main menu item is a link itself.
    So when you click on it you go to the linked page and there is no way to unfold the submenus.

    In desktop view the submenus open (unfold) on hover.

    I know that’s the way it should happen. Just asking if there is any trick to make this work somehow.

    #845728
    Tom
    Lead Developer
    Lead Developer

    Ah, this is typically where the dropdown arrow would be useful, as you can tap it to open the sub-menu. Are you not wanting the arrows to show on mobile?

    #845841
    Harris

    It’s ok if the arrows show only on the mobile menu.
    How can I enable them?

    #846075
    Tom
    Lead Developer
    Lead Developer

    Try this CSS:

    @media (max-width: 768px) {
        .menu-item-has-children .dropdown-menu-toggle {
            display: block;
        }
    }
    #846796
    Harris

    Just tried it and doesn’t seem to be working Tom.

    #846797
    Harris

    I moved it at the end of the rest css and it works now.
    Thanks!

    Is there some way to have the arrow just after the end of the text? (not so important, just wondering)

    #847014
    Tom
    Lead Developer
    Lead Developer

    Try this as well:

    .main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle {
        float: none;
        display: inline-block;
    }

    Let me know 🙂

    #849403
    Harris

    Just writting to let you know that it works fine.
    Thanks!

    #849649
    Tom
    Lead Developer
    Lead Developer

    You’re welcome 🙂

    #866748
    Harris

    Hello,

    Trying to apply similar styling to a second site, but the submenu divider and the submenu padding does not seem to work using the same css.

    Also the menu dividing dashes appear in the submenu.

    It’s something like css not working for the submenu.

    Can you please have a look? I have updated the site url to the new one.

    Thanks

    #867291
    Tom
    Lead Developer
    Lead Developer

    On the working site, you’ve used this ID in your CSS: #menu-main-menu

    The ID of the second site is different: #menu-main-menu-1

    So change the old ID to the new ID in your CSS, and it should be the same as the first site.

    #867345
    Harris

    Thanks Tom!

    Actually I didn’t used any ID. I think it was auto-created.
    Both were “named” “Main Menu”

    Thanks once again

Viewing 15 posts - 16 through 30 (of 33 total)
  • You must be logged in to reply to this topic.