[Resolved] Change alignment of dropdown menu item

[Andreas]

Hi,

due to the closed topic on
https://generatepress.com/forums/topic/change-alignment-of-single-menu-item/

here again my problem:
On my page the submenu opens not to the left, but on top of the menu item I’m hovering.

Thanks
Andy

[David]

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

[Andreas]

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

[David]

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

[Andreas]

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

[David]

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 ?

[Andreas]

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

[Ying]

Hi Andreas,

Try this:

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

[Andreas]

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

[Ying]

Ah ok, I didn’t understand your meaning correctly, sorry about that 🙂

Glad you figured it out!

[Author]

Posts