Change alignment of dropdown menu item

Hi there,

in the document provided in that other topic ie.

https://docs.generatepress.com/article/navigation-dropdown/#opening-specific-sub-menus-to-the-left

Looks like you missed this part.

First add open-left to the Custom Classes field for the far right menu item.

You need to:

1. Go to Appearance > Menus
2. Select the menu item that has the dropdown menu items.
3. Add a CSS Class to the menu item:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

The CSS Class has to be: open-left

Hi David,

thanks for the quick reply.

I first added the class to "subpage 2". And now also to the submenu "aaaa".
But it still does not work...

Best
Andy

It has to be added to the Page 2 menu item.

That did the trick :)

but it's not possbible do do this only for the submenu (rollover "subpage 2")?!

note: it's important to set in "appearance -> customize -> general -> icon type" to "font" to get the icon defined in the css. Perhaps you can add this to the domumentation.

Thanks a lot
Andy

but it’s not possbible do do this only for the submenu (rollover “subpage 2”)?!

Why would you want to?
If you have many sub-sub menus then would you not want to change all of them ?

Just want the first dropdown (rollover "page 2") to the right and second level dropdown/flyout (rollover "subpage 2") to the left.

Hi Andreas,

Try this:

.main-navigation ul ul li {
    text-align: right;
}
.main-navigation ul ul ul li {
    text-align: left;
}

Hi Ying,

this just changes the orientation of the text in the dropdown.

But I figured it out now:

I removed this style change:
.dropdown-hover .main-navigation:not(.toggled) ul .open-left ul {
left: auto;
right: 0;
}

so the first drowdown still goes to the right and second level goes to the left.

Thanks a lot
Andy

Ah ok, I didn't understand your meaning correctly, sorry about that :)

Glad you figured it out!