[Resolved] Make desktop dropdown behave like mobile dropdown and go downwards

[Jordan]

Hello, I have a navigation item at the very end of the menu with 2nd and 3rd level dropdown menus. Is it possible to make this menu item open the dropdown downwards instead of it going left or right (so only this menu item behaves like the mobile dropdowns)?

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Jordan]

I sent some info in the Private information form field. Nothing has notified me if the message was sucessfullly sent or not however.

[Leo]

Sorry I don’t see the info.

Can you make sure it’s added here with your next reply?
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Jordan]

I’ve posted some info in the Private information section below.

[Tom]

Hi there,

It’s possible, but it can be clunky/bad UX:

.dropdown-hover .main-navigation:not(.toggled) ul .open-left li:hover > ul {
    left: auto;
    right: auto;
    position: relative;
}

[Jordan]

Great, thanks for the code. It looks like that’s exactly what the client wanted.

[Tom]

Awesome, glad I could help 🙂

[Jordan]

Tom, so I’ve run into an issue with the code you provided. When I try to put the mouse on the very last menu item (underneath the toggled dropdown), the Contact Us link, the whole dropdown disappears and I can’t click on that last link anymore. Any suggestions on a fix?

[David]

Hi there,

i don’t think theres a solution for that without bogging the site down with Javascript. I think thats what Tom meant when he said it can be a bad/clunky UX….

[Jordan]

David, that’s what I was also thinking. Looks like the best solution is to not put any links below that specific dropdown.

[David]

Yep that would be a good fix 🙂

[Author]

Posts