Dropdown opens differently

[suzannereid]

Hi!
We’re working on a site http://dev-religion-news-foundation.pantheonsite.io and all the dropdowns open aligned left under the menu item except the “Get involved” dropdown opens aligned right and pushes towards the left of the page. I understand it’s set to do that for mobile responsiveness but I’ve been requested to make it the same as the rest of the dropdowns. I noticed that in the code that they all have an attribute ‘data-x-stem=“dr”’ except that last one which seems to be the issue.

What do i do to keep the “get involved” menu tab from autmatically pulling ‘data-x-stem=“dl”’ instead of ‘dr’? Thanks!

[rad]

Hi Suzan,

Thanks for reaching out.

It’s an automatic behavior of the sub-menu, your Get Involved menu item is almost on the right-most where if the sub-menu opens, it will overflow and clipped at the edged of the browser. To prevent that, it automatically changes the alignment.

Try changing that menu position to the left most and you’ll see its sub-menu changes position as well. Again, it’s preventing the clipping but doesn’t mean clipping always occurs. But if you still wish to position it like the other then please add this CSS to Theme Options > CSS

.x-dropdown {
left: 0 !important;
right: auto !important;
}

Thanks!

[suzannereid]

Thank you!

[lely]

You’re always welcome Suzan!

Cheers.

[suzannereid]

@Rad

.x-dropdown {
left: 0 !important;
right: auto !important;
}

So, I implemented this code and it’s actually not changing it at all.

[ruenel]

Hello @suzannereid,

Please have the css code updated and use this instead:

.x-menu .x-dropdown {
    left: 0 !important;
    right: auto !important;
}

After doing the site changes, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

And please clear your browser cache too. You may use private browsing mode in testing your site to make sure that you are viewing the latest codes from the updates and not the cached version in your browser.

Please let us know how it goes.

[suzannereid]

Thank you, this worked!

[Prasant]

You are most welcome.