Crio - Second header menu dropdown overlaps text link on mobile

[nicolepaschen]

I have two menus in the header. On mobile, the secondary menu dropdown has a + sign but it overlaps the text.

[timelsass]

that one is tricky. the main reason this is lthis way is because of social media icon menus where the desired appearance is inline next to each other for each icon. Changing dropdowns in this situation and making the menu items appear full width isn't difficult, but would cause social media icon menus to then be vertical on mobile. If you add the hamburger to the location, then it will display as the main menu location does where there's no overlap and veritical. I think the only solution to have it both ways would be to introduce a new control here where a user can opt for inline display, and in this case - I think we would then want to flatten dropdowns completely so inline display menus don't offer dropdowns. This is currently possible via the configs, but there's not any direct controls or code to handle it for a user. Having the ability to do the hamburger all the time we discussed previously would probably tie in as a nice feature that would go along with implementing this feature. For design purposes, just setting the li to 100% width via css would probably do what you need, but is less than ideal for users in general:

#secondary-wrap .sm li {
    width: 100%;
}

[nicolepaschen]

Cannot replicate closing