[Resolved] Submenus styling

[David]

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.

[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

[Tom]

Hi there,

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

[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.

[Tom]

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?

[Harris]

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

[Tom]

Try this CSS:

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

[Harris]

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

[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)

[Tom]

Try this as well:

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

Let me know 🙂

[Harris]

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

[Tom]

You’re welcome 🙂

[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

[Tom]

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.

[Harris]

Thanks Tom!

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

Thanks once again

[Author]

Posts