[Resolved] Navigation with "Mouse Over" and "Click" different

[Sven]

Hello, i would like to change the way how users navigate through my site.

Currently i have a Navbar at the Top with Submenus. Users have to hover only to get the sub menus. When they hover on a Menu, the submenus open. The submenus open a bit to the right and the next submenu also a bit to the right.

When i change the Navigation to open the Submenus with a click, the Submenus sho right below the menu. I try wo explain:

With Option “Open Navigation with Mouse-Over” it looks like

Menu
-Submenu1
–Submenu2

With Option “Open Navigation with Click on Menu Element” it looks like this

Menu
Submenu1
Submenu2

I would love to see the Submenus1+2 also a bit below and right to the Menu. I hope the Admin-Menu Translation is correct. I use the german version.

Screenshot how it looks like with “Mouse Over” Option: https://www.tsvtrittau-fussball.de/downloads/tmp/good.jpg

Screenshot how it looks like with “Klick to open” Option: https://www.tsvtrittau-fussball.de/downloads/tmp/not-good.jpg

I would love to see the menus on Screenshot good.jpg with the settings from Screenshot not-good.jpg 😉

Thank you for any ideas and best regards.

Sven

[Tom]

Hi Sven,

I wonder if this CSS will do the trick?:

.dropdown-click .main-navigation ul ul li.sfHover > ul.toggled-on {
    left: 100%;
    position: absolute;
    top: 0;
    background-color: #3f3f3f; /* Change to your sub-menu background color */
}

.dropdown-click ul ul .menu-item-has-children>a .dropdown-menu-toggle:before {
    content: "\f105" !important;
}

Let me know 🙂

[Sven]

Wonderful! Thank you very much! This did it exactly!

Best regards, Sven

[Tom]

You’re welcome 🙂

[Author]

Posts