Open Certain Menu To The Left

[Dave]

Hey Tom,

Looking at this documention, I implemented the CSS to open sub-menus to the left:

https://docs.generatepress.com/article/navigation-dropdown/

However, I’m looking to only apply that to the furthest right drop down menus, not to all of them. The far right ones go off screen so I’d like them to open to the left. The others, I’d like to have them open like they are set to in default, to the right. Is that possible?

Thanks!
– Dave

GeneratePress 1.3.44

GP Premium 1.2.94

[Leo]

Hi Dave,

First add open-left to the Custom Classes field for the far right menu item:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Then replace the CSS from the doc page with this:

.dropdown-hover .main-navigation ul .open-left ul {
    left: auto;
    right: 0;
}

.dropdown-hover .main-navigation ul .open-left ul ul {
    left: auto;
    right: 100%;
}

.dropdown-hover .main-navigation .main-nav ul .open-left ul li.menu-item-has-children > a {
    padding-left: 0;
    padding-right: 20px;
}

.dropdown-hover .main-navigation ul .open-left ul .menu-item-has-children .dropdown-menu-toggle {
    float: left;
    padding-left: 20px;
    padding-right: 15px;
}

.dropdown-hover .main-navigation .open-left .children .dropdown-menu-toggle:before, 
.dropdown-hover .main-navigation .open-left .sub-menu .dropdown-menu-toggle:before {
    content: "\f104";
}

Let me know.

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

[Dave]

Aw wow I should have known that. Thank you Leo!

[Leo]

Wasn’t easy for me either haha You’re welcome 🙂

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

[Jay Martin]

Might I suggest this solution be added to the KnowledgeBase article referenced by the OP?

Navigation Dropdown

I came upon that great page yesterday, but it took quite a while using Search to find this more appropriate solution.

Thanks!

[Leo]

I agree 🙂

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

[Tom]

Done 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jay Martin]

Outstanding, thanks for the fast response.

[Tom]

Thanks for the suggestion 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[litesprint]

Hi Dave,

First add open-left to the Custom Classes field for the far right menu item:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Then replace the CSS from the doc page with this:

This doesn’t seem to work anymore when dropdown is set to the right in Customizer. Only the icon moves to the left, but the dropdown still opens to the right (and gets cut off). Reverted it back to the original.

Update: Works now. Used the CSS from the documentation article and added the custom class manually.

[Leo]

Hi there,

Any chance you can open a new topic for this as this one is really old?

Make sure to implement this method here and link us to the site in question if it still doesn’t work:
https://docs.generatepress.com/article/navigation-dropdown/#opening-specific-sub-menus-to-the-left

Thanks 🙂

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

[Author]

Posts