[Resolved] How to align the dropdown menu if there isn’t enough space on the right

[Jin]

How can we choose to align the menu to the left if there isn’t enough space to show all characters?

[David]

Hi there,

that parent menu item, give it a CSS Class of open-left.
Add this CSS:

@media(min-width: 769px) {
    .main-navigation .main-nav li.open-left > ul {
        left: unset !important;
        right: 0;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jin]

Hi David

I’ve added it but the bug still persists.

[Ying]

Hi Jin,

I can see the CSS has been added to your site, but I don’t see the class open-left being added to the contact menu item.

If you don’t know how to add CSS class to menu items, follow the step 1-3 of this article, add open-left class.
https://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item

[Jin]

All good now. My bad I missed David’s first sentence regarding adding the CSS class to the menu item.

[Ying]

Glad to hear that 🙂

[Author]

Posts