Make secondary sub nav stay in line withs container

[podii]

Hi Team,

I was hoping one of you could help me out with a question I have about inline nav menus on https://mazesurgeons.org

When there is a secondary dropdown nav menu item, I would like the new nav items to remain in the original dropdown container. I was able to achieve my desired result for the hamburger nav menu with the following code:

@media screen and (max-width: 979px) {
.sub-menu.x-dropdown.x-active {
position: initial !important;
box-shadow: none !important;
}

However this DOES NOT work for the inline menu. Applying ‘posiiton: initial’ breaks the menu all sorts of weird.

Desired result (achieved on hamburger menus)

Improper result on inline nav menus

Any help would be greatly appreciated, thanks!!

[ruenel]

Hello Hunter,

Thanks for writing in!

Do you want something like this?

If that is the case, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-menu-inline [data-x-stem] [data-x-stem*="l"] {
    position: relative;
    right: 0;
    left: -20px;
    padding-left: 0 !important;
    display: none;
}

.x-menu-inline .sub-menu.x-dropdown.x-active {
    display: block;
}

Please let us know if this works out for you.

[podii]

This worked great! Thanks so much!

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!